React-adresy URL routera nie działają podczas odświeżania lub ręcznego pisania

Odpowiedzi tutaj są bardzo pomocne, to, co działało dla mnie, to skonfigurowanie mojego serwera Webpack, aby oczekiwał tras.

devServer: {
   historyApiFallback: true,
   contentBase: './',
   hot: true
},

Historia jest tym, co naprawiło ten problem dla mnie. Teraz routing działa poprawnie i mogę odświeżyć stronę lub wpisać adres URL bezpośrednio. Nie musisz się martwić o pracę na serwerze węzłów. Ta odpowiedź oczywiście działa tylko wtedy, gdy używasz webpack.

EDIT: zobacz moją odpowiedź tutaj, aby uzyskać bardziej szczegółowy powód, dla którego jest to konieczne: https://stackoverflow.com/a/37622953/5217568

Możesz zmienić swój plik .htaccess i wstawić to:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

Używam react: "^16.12.0" i react-router: "^5.1.2" Ta metoda jest Catch-all I jest prawdopodobnie najprostszym sposobem, aby zacząć.

Dla Użytkowników Reactowego Routera V4:

Jeśli spróbujesz rozwiązać ten problem techniką historii Hash wymienioną w innych odpowiedziach, zauważ, że

<Router history={hashHistory} >

Nie działa w V4, Proszę użyć HashRouter zamiast:

import { HashRouter } from 'react-router-dom'

<HashRouter>
  <App/>
</HashRouter>

Reference: HashRouter

Użyłem create-react-app, aby stworzyć stronę internetową i miałem ten sam problem przedstawiony tutaj. Używam BrowserRouting z pakietu react-router-dom. Działam na serwerze Nginx i to, co dla mnie rozwiązało, to dodanie do /etc/nginx/yourconfig.conf

location / {
  if (!-e $request_filename){
    rewrite ^(.*)$ /index.html break;
  }
}

Co odpowiada dodaniu do .htaccess W przypadku, gdy używasz Appache

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Wydaje się, że jest to również rozwiązanie zaproponowane przez samego Facebook ' a i można je znaleźć tutaj

W Twoim indeksie.html head, dodaj:

<base href="/">
<!-- This must come before the css and javascripts -->

Następnie podczas pracy z Webpack dev server użyj tego polecenia.

webpack-dev-server --mode development --hot --inline --content-base=dist --history-api-fallback

--history-api-fallback jest ważną częścią

Router może być wywoływany na dwa różne sposoby, w zależności od tego, czy nawigacja odbywa się na kliencie, czy na serwerze. Masz go skonfigurowany do pracy po stronie klienta. Kluczowym parametrem jest drugi po metodzie run , location.

Gdy używasz komponentu React Router Link, blokuje on nawigację w przeglądarce i wywołuje transitionTo, aby wykonać nawigację po stronie klienta. Używasz HistoryLocation, więc używa HTML5 history API, aby zakończyć iluzję nawigacja poprzez symulację nowego adresu URL na pasku adresu. Jeśli używasz starszych przeglądarek, to nie będzie działać. Trzeba by użyć komponentu HashLocation.

Po naciśnięciu odśwież, omija się cały kod Reacta i routera. Serwer pobiera żądanie /joblist I musi coś zwrócić. Na serwerze musisz przekazać żądaną ścieżkę do metody run, aby renderowała prawidłowy widok. Możesz użyć tej samej mapy trasy, ale prawdopodobnie będziesz potrzebować inne wywołanie do Router.run. Jak wskazuje Charles, możesz użyć przepisywania adresów URL, aby to obsłużyć. Inną opcją jest użycie węzła.js server obsługuje wszystkie żądania i przekazuje wartość path jako argument location.

W Expressie, na przykład, może wyglądać tak:

var app = express();

app.get('*', function (req, res) { // This wildcard method handles all requests

    Router.run(routes, req.path, function (Handler, state) {
        var element = React.createElement(Handler);
        var html = React.renderToString(element);
        res.render('main', { content: html });
    });
});

Zwróć uwagę, że ścieżka żądania jest przekazywana do run. Aby to zrobić, musisz mieć silnik widoku po stronie serwera, do którego możesz przekazać renderowany HTML. Istnieje wiele innych rozważań przy użyciu renderToString i w uruchamianie Reacta na serwerze. Gdy strona zostanie renderowana na serwerze, gdy aplikacja załaduje się do Klienta, będzie renderowana ponownie, aktualizując renderowany HTML po stronie serwera w razie potrzeby.

Jeśli korzystasz z aplikacji react przez AWS Static S3 Hosting & CloudFront

Ten problem pojawił się w odpowiedzi CloudFront z Komunikatem 403 Access Denied, ponieważ oczekiwał, że /some/other/path istnieje w moim folderze S3, ale ta ścieżka istnieje tylko wewnętrznie w routingu Reacta z reactowym routerem.

Rozwiązaniem było skonfigurowanie reguły stron błędów dystrybucji. Przejdź do ustawień CloudFront i wybierz swoją dystrybucję. Następnie przejdź do zakładki "Strony błędów". Klik "Utwórz niestandardową odpowiedź na błąd" i dodaj wpis dla 403, ponieważ jest to kod statusu błędu, który otrzymujemy. Ustaw ścieżkę strony odpowiedzi na /index.html i kod stanu do 200. Efekt końcowy zadziwia mnie swoją prostotą. Strona indeksu jest obsługiwana, ale adres URL jest zachowany w przeglądarce, więc po załadowaniu aplikacji react wykrywa ścieżkę URL i przechodzi do żądanej trasy.

Strony Błędów 403 Rule

To może rozwiązać twój problem]}

Miałem również do czynienia z tym samym problemem w aplikacji ReactJS w trybie produkcyjnym. Oto 2 rozwiązanie problemu.

1.Zmień historię routingu na" hashHistory " zamiast browserHistory w miejscu

<Router history={hashHistory} >
   <Route path="/home" component={Home} />
   <Route path="/aboutus" component={AboutUs} />
</Router>

Teraz zbuduj aplikację za pomocą polecenia

sudo npm run build

Następnie umieść folder build w folderze var / www/ , teraz aplikacja działa dobrze z dodaniem # tag w każdym adresie URL. jak

Localhost/ # / home localhost/# / aboutus

Rozwiązanie 2: bez # tagów za pomocą browserHistory,

Ustaw swoją historię = {browserHistory} w routerze, a teraz zbuduj go za pomocą sudo npm run build.

Musisz utworzyć plik "conf", aby rozwiązać stronę 404 not found, plik conf powinien być taki.

Otwórz terminal wpisz poniższe polecenia

<VirtualHost *:80>
    ServerAdmin [email protected]
    ServerName 0.0.0.0
    ServerAlias 0.0.0.0
    DocumentRoot /var/www/html/

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
    <Directory "/var/www/html/">
            Options Indexes FollowSymLinks
            AllowOverride all
            Require all granted
    </Directory>
</VirtualHost>

cd /etc/apache2/sites-available
sudo a2ensite sample.conf

   RewriteEngine On
   RewriteBase /
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteCond %{REQUEST_FILENAME} !-l
   RewriteRule ^.*$ / [L,QSA]

Jeśli używasz Create React App:

Jest świetny spacer o tym problemie z rozwiązaniami dla wielu głównych platform hostingowych, które można znaleźć tutaj na stronie Create React app. Na przykład, używam Reactowego routera v4 i Netlify dla mojego kodu nakładki. Wystarczyło dodać 1 plik do mojego folderu publicznego ("_redirects") i jedną linijkę kodu w tym pliku:

/*  /index.html  200

Teraz moja strona poprawnie renderuje ścieżki jak mysite.com/pricing po wprowadzeniu do przeglądarki lub gdy ktoś naciśnie odśwież.

Jeśli hostujesz swoją aplikację react w IIS, po prostu dodaj stronę internetową.plik konfiguracyjny zawierający:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpErrors errorMode="Custom" existingResponse="Replace">
        <remove statusCode="404" subStatusCode="-1" />
        <error statusCode="404" path="/" responseMode="ExecuteURL" />
    </httpErrors>
  </system.webServer>
</configuration>

Spowoduje to, że serwer IIS zwróci stronę główną klientowi zamiast błędu 404 i nie będzie musiał używać historii skrótów.

Serwer Dev Webpack ma opcję, aby to włączyć. Otwórz package.json i dodaj --history-api-fallback. To rozwiązanie zadziałało dla mnie.

React-router-tutorial

Dodaj to do webpack.config.js:

devServer: {
    historyApiFallback: true
}

Stos produkcyjny: React, React Router v4, BrowswerRouter, Express, Nginx

1) przeglądarka użytkowników dla ładnych adresów URL

// app.js

import { BrowserRouter as Router } from 'react-router-dom'

const App = () {
  render() {
    return (
        <Router>
           // your routes here
        </Router>
    )
  }
}

2) Dodaj indeks.html do wszystkich nieznanych żądań za pomocą /*

// server.js

app.get('/*', function(req, res) {   
  res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
})

3) Pakiet webpack z webpack -p

4) run nodemon server.js or node server.js

location / {
    try_files $uri /index.html;
}

Spróbuj dodać ".htaccess " plik w folderze publicznym z poniższym kodem.

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

RewriteRule ^ /index.html [L]  

Jeśli masz alternatywę do indeksu.html, upewnij się, że w indeksie.plik html masz to:

<script>
  System.config({ baseURL: '/' });
</script>

Może się to różnić w zależności od projektu.

Jeśli używasz firebase wszystko, co musisz zrobić, to upewnić się, że masz właściwość przepisuje w swojej firebase.plik json w katalogu głównym aplikacji(w sekcji hosting).

Na przykład:

{ 
  "hosting": {
    "rewrites": [{
      "source":"**",
      "destination": "/index.html"
    }]    
  }
}

Mam nadzieję, że to oszczędzi komuś innego gromadkę frustracji i zmarnowanego czasu.

Czytaj dalej w temacie:

Https://firebase.google.com/docs/hosting/full-config#rewrites

Firebase CLI: "Konfiguracja jako jednostronicowa app (przepisz wszystkie adresy URL do / index.html)"

Znalazłem rozwiązanie dla mojego SPA z reactowym routerem (Apache). Po prostu dodaj .htaccess

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

Źródło: https://gist.github.com/alexsasharegan/173878f9d67055bfef63449fa7136042

Nie używam jeszcze renderowania po stronie serwera, ale trafiłem w ten sam problem, co OP, w którym Link wydawał się działać dobrze przez większość czasu, ale nie powiódł się, gdy miałem parametr. Udokumentuję moje rozwiązanie, żeby sprawdzić, czy komuś pomoże.

Mój główny jsx Zawiera to:

<Route onEnter={requireLogin} path="detail/:id" component={ModelDetail} />

Działa to dobrze dla pierwszego pasującego łącza, ale gdy identyfikator :zmienia się w wyrażeniach <Link> zagnieżdżonych na stronie szczegółów modelu, url zmienia się na pasku przeglądarki, ale zawartość strony początkowo nie zmieniła się na odzwierciedlają połączony model.

Problem polegał na tym, że użyłem props.params.id do Ustawienia modelu w componentDidMount. Komponent jest montowany tylko raz, więc oznacza to, że pierwszy model jest Tym, który przykleja się na stronie, a kolejne linki zmieniają rekwizyty, ale pozostawiają stronę wyglądającą bez zmian.

Ustawienie modelu w stanie komponentu zarówno w componentDidMount, jak i w componentWillReceiveProps (gdzie opiera się na kolejnych właściwościach) rozwiązuje problem, a zawartość strony zmienia się tak, aby odzwierciedlała pożądany model.

Ten temat jest trochę stary i rozwiązany, ale chciałbym zaproponować Ci proste, jasne i lepsze rozwiązanie. Działa, jeśli używasz serwera www.

Każdy serwer WWW ma możliwość przekierowania użytkownika na stronę błędu w przypadku http 404. Aby rozwiązać ten problem, musisz przekierować użytkownika na stronę indeksu.

Jeśli korzystasz z Java base server (tomcat lub dowolnego serwera aplikacji java) rozwiązaniem może być "po": {]}

Www.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <!-- WELCOME FILE LIST -->
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>

    <!-- ERROR PAGES DEFINITION -->
    <error-page>
        <error-code>404</error-code>
        <location>/index.jsp</location>
    </error-page>

</web-app>

Przykład:

• GET http://example.com/about
• serwer WWW wyrzuca http 404 ponieważ ta strona nie istnieje po stronie serwera
• Konfiguracja strony błędu informuje serwer, który wysyła indeks.strona jsp powrót do użytkownika
• następnie JS wykona resztę zadania po stronie klienta, ponieważ url po stronie klienta jest nadal http://example.com/about .

Że czy to, nie potrzeba więcej magii:)

Dla tych, którzy używają IIS 10, to jest to, co powinieneś zrobić, aby to naprawić. Upewnij się, że używasz browserHistory z tym. Co do referencji podam kod do routingu, ale nie to się liczy, liczy się następny krok po kodzie komponentu poniżej:

class App extends Component {
    render() {
        return (
            <Router history={browserHistory}>
                <div>
                    <Root>
                        <Switch>
                            <Route exact path={"/"} component={Home} />    
                            <Route path={"/home"} component={Home} />
                            <Route path={"/createnewproject"} component={CreateNewProject} />
                            <Route path={"/projects"} component={Projects} />
                            <Route path="*" component={NotFoundRoute} />
                        </Switch>
                    </Root>
                </div>
            </Router>
        )
    }
}
render (<App />, window.document.getElementById("app"));

Ponieważ problem polega na tym, że IIS otrzymuje żądanie od przeglądarek klienckich, zinterpretuje adres URL tak, jakby pytał o stronę, a następnie zwraca stronę 404, ponieważ nie ma dostępnej strony. Do the "po": {]}

1. Otwórz IIS
2. rozwiń serwer, a następnie otwórz Folder witryny
3. Kliknij stronę / aplikację
4. Przejdź do stron błędów
5. otwórz pozycję statusu błędu 404 na liście
6. zamiast opcji "Wstaw zawartość ze statycznego pliku do odpowiedzi na błąd", zmień ją na "wykonaj adres URL na tej stronie" i dodaj wartość ukośnika " / " do adresu URL.

I teraz będzie działać dobrze.

I hope it pomaga. :-)

Jeśli używasz Express lub innego frameworka w backendzie, możesz dodać podobną konfigurację jak poniżej i sprawdzić ścieżkę publiczną Webpack w konfiguracji, powinna działać dobrze nawet przy przeładowaniu, jeśli używasz BrowserRouter

expressApp.get('/*', (request, response) => {
    response.sendFile(path.join(__dirname, '../public/index.html'));
});

Naprawiono błąd "nie można pobrać / URL" przy odświeżaniu lub przy bezpośrednim wywołaniu adresu URL.

Skonfiguruj swój webpack.config.js aby się spodziewać podanego łącza trasy takie jak to.

module.exports = {
  entry: './app/index.js',
  output: {
       path: path.join(__dirname, '/bundle'),
       filename: 'index_bundle.js',
       publicPath: '/'
  },

Możesz spróbować przeczytać to wszystko, choć nie jest moje:

Https://www.andreasreiterer.at/fix-browserrouter-on-apache/

Naprawianie routingu aplikacji Oto, jak w końcu naprawić routing. Aby powiedzieć Apache ' owi, aby przekierował żądania do indeksu.html gdzie mieszka nasza aplikacja, musimy zmodyfikować .plik htaccess. Jeśli nie ma jeszcze takiego pliku w folderze aplikacji, po prostu go Utwórz.

Więc upewnij się, że umieścisz te 4 linie, które w magiczny sposób sprawią, że Twój routing praca.

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Po tym jak to umieścimy .plik htaccess do tego samego katalogu co indeks.html, Apache przekieruje każde nowe żądanie bezpośrednio do Twojej aplikacji.

Bonus: wdrożenie aplikacji React do podkatalogu

Jeśli wdrażasz swoją aplikację do podkatalogu, więc jest ona dostępna np. przez https://myapp.com/the-app , wkrótce zauważysz, że jest inny problem. Każde kliknięcie na nową trasę spowoduje przekształcenie adresu URL w coś w rodzaju https://myapp.com/route-abc - który pęknie ponownie po przeładowaniu. Ale jest na to prosta poprawka:

BrowserRouter ma właściwość o nazwie basename, w której możesz określić ścieżkę podkatalogu:

Od teraz, każda trasa jak / kontakty spowoduje URL jak http://myapp.com/the-app/contacts .

Jeśli używasz polecenia "create-react-app",

Aby wygenerować aplikację reactową, następnie pakiet.json musi mieć jedną zmianę, aby poprawnie uruchomić production build react SPA w przeglądarce. Otwórz paczkę.json i dodaj do tego następujący segment kodu,

"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

Tutaj najważniejszą częścią jest "--history-api-fallback", aby włączyć oddzwanianie do API historii.

Czasami pojawi się błąd 404, jeśli używasz Springa lub innego back-endowego API. Więc w takiej sytuacji, ty musisz mieć kontroler w back-endzie, aby przesłać dowolne żądanie (pożądane) do indeksu.plik html do obsługi przez react-router. Poniżej przedstawiono przykładowy kontroler napisany przy użyciu springa.

@Controller
public class ForwardingController {
    @RequestMapping("/<any end point name>/{path:[^\\.]+}/**")
    public String forward(HttpServletRequest httpServletRequest) {
        return "forward:/";
    }
}

Na przykład, jeśli weźmiemy back-end API REST endpoint jako " abc " (http://localhost:8080/abc/**) każde żądanie przychodzące do tego punktu końcowego przekieruje do aplikacji reactowej (index.plik html), a react-router poradzi sobie z tym po słowach.

Ponieważ używam. Net Core MVC coś takiego mi pomogło:

    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            var url = Request.Path + Request.QueryString;
            return App(url);
        }

        [Route("App")]
        public IActionResult App(string url)
        {
            return View("/wwwroot/app/build/index.html");
        }
   }

Zasadniczo po stronie MVC, wszystkie Nie pasujące trasy spadną do Home/Index, Jak określono w startup.cs. Wewnątrz Index możliwe jest uzyskanie oryginalnego adresu URL żądania i przekazanie go w razie potrzeby.

Startup.cs

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");

            routes.MapSpaFallbackRoute(
                name: "spa-fallback",
                defaults: new { controller = "Home", action = "Index" });
        });

Jeśli hostujesz w IIS; dodanie tego do mojego webconfig rozwiązało mój problem

<httpErrors errorMode="Custom" defaultResponseMode="ExecuteURL">
    <remove statusCode="500" subStatusCode="100" />
    <remove statusCode="500" subStatusCode="-1" />
    <remove statusCode="404" subStatusCode="-1" />
    <error statusCode="404" path="/" responseMode="ExecuteURL" />
    <error statusCode="500" prefixLanguageFilePath="" path="/error_500.asp" responseMode="ExecuteURL" />
    <error statusCode="500" subStatusCode="100" path="/error_500.asp" responseMode="ExecuteURL" />
</httpErrors>

Możesz zrobić podobną konfigurację dla każdego innego serwera

Użycie HashRouter zadziałało u mnie z Redux również, po prostu zamień:

import {
  Router //replace Router
} from "react-router-dom";

ReactDOM.render(
    <LocaleProvider locale={enUS}>
    <Provider store={Store}>
        <Router history={history}> //replace here saying Router
            <Layout/>
        </Router>
    </Provider>
</LocaleProvider>, document.getElementById("app"));
registerServiceWorker();

Do:

import {
  HashRouter //replaced with HashRouter
} from "react-router-dom";

ReactDOM.render(
    <LocaleProvider locale={enUS}>
    <Provider store={Store}>
        <HashRouter history={history}> //replaced with HashRouter
            <Layout/>
        </HashRouter>
    </Provider>
</LocaleProvider>, document.getElementById("app"));
registerServiceWorker();

Na wszelki wypadek, ktoś tu szuka rozwiązania na React JS SPA z Laravel. Przyjęta odpowiedź jest najlepszym wyjaśnieniem, dlaczego takie problemy się zdarzają. Jak już wyjaśniono, musisz skonfigurować zarówno po stronie klienta, jak i po stronie serwera. W szablonie blade Dołącz plik dołączony do js, upewnij się, że używasz URL facade w ten sposób

<script src="{{ URL::to('js/user/spa.js') }}"></script>

W swoich trasach upewnij się, że dodajesz to do głównego punktu końcowego, w którym znajduje się szablon blade. Na przykład,

Route::get('/setting-alerts', function () {
   return view('user.set-alerts');
});

Powyższe jest głównym punktem końcowym dla szablon ostrza. Teraz dodaj też opcjonalną trasę,

Route::get('/setting-alerts/{spa?}', function () {
  return view('user.set-alerts');
});

Problem polega na tym, że najpierw ładowany jest szablon blade, a następnie Router reactowy. Tak więc, kiedy ładujesz '/setting-alerts', ładuje html i js. Ale po załadowaniu '/setting-alerts/about', najpierw ładuje się po stronie serwera. Ponieważ po stronie serwera nie ma nic w tej lokalizacji, zwraca not found. Gdy masz ten opcjonalny router, ładuje tę samą stronę i react router jest również ładowany, a następnie react loader decyduje, który komponent do pokazania. Mam nadzieję, że to pomoże.

Dodanie więcej informacji do Joshua Dyck ' s answer .

Jeśli używasz Firebase i chcesz używać zarówno trasy głównej, jak i trasy podkatalogów, musisz dodać następujący kod w firebase.json:

{
  "hosting": {
    "rewrites": [
      {
        "source": "*",
        "destination": "/index.html"
      },
      {
        "source": "/subdirectory/**",
        "destination": "/subdirectory/index.html"
      }
    ]
  }
}

Przykład:

Budujesz stronę internetową dla klienta. Chcesz, aby właściciel strony dodawał informacje w https://your.domain.com/management podczas gdy użytkownicy Strony będą nawigować do https://your.domain.com .

W tym przypadek Twój plik firebase.json będzie wyglądał tak:

{
  "hosting": {
    "rewrites": [
      {
        "source": "*",
        "destination": "/index.html"
      },
      {
        "source": "/management/**",
        "destination": "/management/index.html"
      }
    ]
  }
}