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

Jeśli hostujesz aplikację React za pośrednictwem AWS Static S3 Hosting i CloudFront

Ten problem pojawił się, gdy CloudFront odpowiedział komunikatem 403 Access Denied, ponieważ oczekiwał, że /some/other/path będzie istnieć w moim folderze S3, ale ta ścieżka istnieje tylko wewnętrznie w routingu Reacta za pomocą routera React.

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

Reguła stron błędów 403

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

Z tym samym problemem spotkałem się również 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 kompilacji w folderze var/www/. Teraz aplikacja działa dobrze z dodaniem tagu # w każdym adresie URL. tak jak

localhost/#/home localhost/#/aboutus

Rozwiązanie 2: Bez tagu # przy użyciu browserHistory,

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

Musisz utworzyć plik conf, aby rozwiązać nie znaleziono strony 404, plik conf powinien wyglądać tak.

otwórz terminal wpisz poniższe polecenia

cd /etc/apache2/sites-available ls nano sample.conf Dodaj do niego poniższą zawartość.

<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>

Teraz musisz włączyć plik sample.conf za pomocą następującego polecenia

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

następnie poprosi Cię o ponowne załadowanie serwera Apache za pomocą usługi sudo apache2 reload lub restart

następnie otwórz folder localhost/build i dodaj plik .htaccess o treści poniżej.

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

Teraz aplikacja działa normalnie.

Uwaga: zmień 0.0.0.0 IP na lokalny adres IP.

Jeśli masz jakiekolwiek wątpliwości co do tego, możesz zgłosić komentarz.

Mam nadzieję, że pomoże innym.

Jeśli hostujesz swoją aplikację React w IIS, po prostu dodaj plik web.config 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>

Dzięki temu serwer IIS ma zwrócić stronę główną do klienta zamiast błędu 404 i nie ma potrzeby używania historii skrótów.

Webpack Dev Server 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- samouczek

Dodaj to do webpack.config.js:

devServer: {
    historyApiFallback: true
}

Spróbuj dodać plik „.htaccess” w folderze publicznym za pomocą poniższego kodu.

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

RewriteRule ^ /index.html [L]  

Jeśli masz kopię zapasową swojego index.html, upewnij się, że w pliku index.html masz to:

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

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

Jeśli korzystasz z Firebase, wszystko, co musisz zrobić, to upewnić się, że masz właściwość rewrites w pliku firebase.json w katalogu głównym aplikacji (w sekcji hostingu).

Na przykład:

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

Mam nadzieję, że oszczędzi to komuś innemu skarbu frustracji i straconego czasu.

Udanego kodowania...

Dalsza lektura na ten temat:

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

Firebase CLI: konfiguracja jako aplikacja jednostronicowa (przepisz wszystkie adresy URL do /index.html)

Dla tych, którzy korzystają z IIS 10, należy to zrobić, aby to naprawić. Upewnij się, że używasz z tym browserHistory. Jako odniesienie podam kod do routingu, ale nie to ma znaczenie, liczy się kolejny 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 z przeglądarek klienckich, zinterpretuje adres URL tak, jakby prosi o stronę, a następnie zwróci stronę 404, ponieważ nie ma dostępnej strony. Wykonaj następujące czynności:

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ść z pliku statycznego do odpowiedzi na błąd”, zmień ją na „Wykonaj adres URL w tej witrynie” i dodaj wartość ukośnika „/” do adresu URL.

I teraz będzie działać dobrze.

Mam nadzieję, że to pomoże. :-)

Znalazłem rozwiązanie dla mojego SPA z routerem React (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 napotkałem ten sam problem, co OP, w którym Link wydawał się działać dobrze przez większość czasu, ale nie powiodło się, gdy miałem parametr. Udokumentuję tutaj moje rozwiązanie, aby zobaczyć, czy komuś pomoże.

Mój główny jsx zawiera to:

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

Działa to dobrze w przypadku pierwszego pasującego łącza, ale gdy :id zmienia się w wyrażeniach <Link> zagnieżdżonych na stronie szczegółów tego modelu, zmienia się adres URL na pasku przeglądarki, ale zawartość strony nie zmieniła się początkowo w celu odzwierciedlenia połączonego modelu.

Kłopot 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ę bez zmian.

Ustawienie modelu w stanie komponentu zarówno w componentDidMount, jak iw componentWillReceiveProps (gdzie jest oparty na następnych właściwościach) rozwiązuje problem, a zawartość strony zmienia się, aby odzwierciedlić pożądany model.

Ten temat jest trochę stary i rozwiązany, ale chciałbym zaproponować proste, jasne i lepsze rozwiązanie. Działa, jeśli korzystasz z 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 należy przekierować użytkownika na stronę indeksu.

Jeśli używasz serwera bazowego Java (tomcat lub dowolny serwer aplikacji Java), rozwiązanie może być następujące:

web.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:

• POBIERZ http://example.com/about
• Serwer WWW zgłasza http 404, ponieważ ta strona nie istnieje po stronie serwera
• konfiguracja strony błędu informuje serwer, że odsyła stronę index.jsp z powrotem do użytkownika
• wtedy JS wykona resztę pracy po stronie klienta, ponieważ adres URL po stronie klienta to nadal http://example.com/about.

To wszystko, koniec z magicznymi potrzebami:)

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

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

Naprawienie błędu „nie można uzyskać /URL” podczas odświeżania lub bezpośredniego wywoływania adresu URL.

Skonfiguruj swój webpack.config.js, aby oczekiwał podanego linku na takie trasy.

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

możesz spróbować przeczytać to wszystko, chociaż nie jest moje:

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

Naprawianie routingu aplikacji Oto jak w końcu naprawić routing. Aby Apache przekierowywał żądania do index.html, gdzie znajduje się nasza aplikacja, musimy zmodyfikować plik .htaccess. Jeśli nie ma jeszcze takiego pliku w folderze Twojej aplikacji, po prostu go utwórz.

Następnie upewnij się, że umieściłeś te 4 wiersze, które w magiczny sposób sprawią, że Twój routing będzie działał.

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

Po umieszczeniu tego pliku .htaccess w tym samym katalogu co index.html, Apache przekieruje każde nowe żądanie bezpośrednio do Twojej aplikacji.

Bonus: Wdrażanie aplikacji React w podkatalogu

Jeśli wdrażasz swoją aplikację w podkatalogu, aby była dostępna m.in. przez https://myapp.com/the-app, wkrótce zauważysz, że jest inny kwestia. Każde kliknięcie nowej trasy spowoduje przekształcenie adresu URL w coś takiego jak https://myapp.com/route-abc – który po przeładowaniu ponownie się zepsuje. Ale jest na to prosta poprawka:

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

From now on, each Route like /contacts will result in an URL like http://myapp.com/the-app/contacts.

Używanie HashRouter działało dla mnie również z Redux, 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();

to:

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();

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

aby wygenerować aplikację React to pakiet.json musi mieć jedną zmianę, aby poprawnie uruchomić produkcyjną kompilację React SPA w przeglądarce. Otwórz package.json i dodaj do niego 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 umożliwić wywołanie zwrotne interfejsu API historii.

Czasami otrzymasz błąd 404, jeśli użyjesz Spring lub innego interfejsu API zaplecza. Tak więc w takiej sytuacji musisz mieć kontroler na zapleczu, aby przekazywać dowolne żądanie (które chcesz) do pliku index.html, aby obsłużyć go React-router. Poniżej zademonstrujemy przykładowy kontroler napisany za pomocą sprężyny.

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

na przykład, jeśli przyjmiemy back-endowy punkt końcowy API REST jako abc (http://localhost:8080/abc/**), każde żądanie przychodzące do tego punktu końcowego będzie przekierowywać do aplikacji React (plik index.html) i reagować- router zajmie się tym później.

W przypadku, gdy ktoś szuka rozwiązania w 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 stronę klienta, jak i stronę serwera. W szablonie ostrza dołącz dołączony plik js, pamiętaj, aby użyć URL facade w ten sposób

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

Upewnij się, że w swoich trasach dodaj to do głównego punktu końcowego, w którym znajduje się szablon ostrza. Na przykład,

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

Powyższe jest głównym punktem końcowym szablonu ostrza. Teraz dodaj również opcjonalną trasę,

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

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

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

    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 niedopasowane trasy zostaną przypisane do Home/Index, jak określono w startup.cs. Wewnątrz Index można uzyskać oryginalny adres URL żądania i przekazać go tam, gdzie jest to potrzebne.

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 korzystasz z usług 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 wykonać podobną konfigurację dla dowolnego innego serwera

Dla tych z was, którzy są tutaj, ponieważ próbujecie obsługiwać aplikację React z katalogu wirtualnego IIS (nie z katalogu głównego witryny), może to być dla was.

Podczas konfigurowania przekierowań '/' nie będzie działać samodzielnie, dla mnie również tam potrzebna jest nazwa katalogu wirtualnego. Oto jak wyglądała moja konfiguracja sieciowa:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <defaultDocument>
            <files>
                <remove value="default.aspx" />
                <remove value="iisstart.htm" />
                <remove value="index.htm" />
                <remove value="Default.asp" />
                <remove value="Default.htm" />
            </files>
        </defaultDocument>
        <rewrite>
            <rules>
                <rule name="React Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/YOURVIRTUALDIRECTORYNAME/" />
                </rule>
            </rules>
        </rewrite>
        <directoryBrowse enabled="false" />
        <httpErrors errorMode="Custom" defaultResponseMode="ExecuteURL">
            <remove statusCode="500" subStatusCode="100" />
            <remove statusCode="500" subStatusCode="-1" />
            <remove statusCode="404" subStatusCode="-1" />
            <remove statusCode="403" subStatusCode="18" />
            <error statusCode="403" subStatusCode="18" path="/YOURVIRTUALDIRECTORYNAME/" responseMode="ExecuteURL" />
            <error statusCode="404" path="/YOURVIRTUALDIRECTORYNAME/" responseMode="ExecuteURL" />
            <error statusCode="500" prefixLanguageFilePath="" path="/YOURVIRTUALDIRECTORYNAME/" responseMode="ExecuteURL" />
            <error statusCode="500" subStatusCode="100" path="/YOURVIRTUALDIRECTORYNAME/" responseMode="ExecuteURL" />
        </httpErrors>
    </system.webServer>
</configuration>

Oprócz pliku web.config aplikacja React sama w sobie wymagała kilku zmian:

w package.json musisz dodać wpis 'homepage':

{
  "name": "sicon.react.crm",
  "version": "0.1.0",
  "private": true,
  "homepage": "/YOURVIRTUALDIRECTORYNAME/",
  "dependencies": {
...

Dodałem nazwę bazową do obiektu historii przeglądarki, którą przekazuję do routera, aby uzyskać dostęp do historii:

import  {createBrowserHistory } from 'history';

export default createBrowserHistory({
    //Pass the public URL as the base name for the router basename: process.env.PUBLIC_URL
});

Dodałem również tę właściwość na moim routerze React w App.js:

  <Router history={history} basename={process.env.PUBLIC_URL}>

Wreszcie w index.html dodałem następującą zakładkę nad tagiem 'title'

  <base href="%PUBLIC_URL%/">

może być tak, że niektóre kroki wymagały notatki, ale wydaje się, że zrobiło to za mnie pracę. Nie wiem, jak skonfigurować go, aby działał w katalogu głównym witryny lub w katalogu wirtualnym bez rekompilacji, ponieważ strona główna w package.json nie może zostać zamieniona po kompilacji, o ile mi wiadomo.

Naprawdę niesamowite odpowiedzi już !! Ale jeśli hostujesz przy użyciu nginx i potrzebujesz szybkiej naprawy ... dodaj następujący wiersz do swojej konfiguracji nginx w bloku lokalizacji

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

Dodaję więcej informacji do odpowiedzi Joshuy Dycka.

Jeśli korzystasz z Firebase i chcesz używać zarówno trasy głównej, jak i trasy podkatalogu, musisz dodać następujący kod w swoim 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 witryny dodał informacje w https://twoja.domena.com/management podczas gdy użytkownicy witryny przejdą do https://twoja.domena.com.

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

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

Używam WebPacka, miałem ten sam problem Rozwiązanie=> W twoim pliku server.js

const express = require('express');
const app = express();

app.use(express.static(path.resolve(__dirname, '../dist')));
  app.get('*', function (req, res) {
    res.sendFile(path.resolve(__dirname, '../dist/index.html'));
    // res.end();
  });

Dlaczego moja aplikacja nie renderuje się po odświeżeniu?

Zastosowaliśmy ekspresowe podejście do obsługi 404

// path to the static react build directory    
const frontend = path.join(__dirname, 'react-app/build');

// map the requests to the static react build directory
app.use('/', express.static(frontend));

// all the unknown requests are redirected to the react SPA
app.use(function (req, res, next) {
    res.sendFile(path.join(frontend, 'index.html'));
});

Działa jak marzenie. Demo na żywo to nasza strona

Rozwiązałem ten problem zmieniając webpack.config.js.

moja nowa konfiguracja wygląda tak:

Przed:

output: {
  path: path.join(__dirname, '/build/static/js'),
  filename: 'index.js'
},


devServer: {
  port: 3000
}

Po:

output: {
  path: path.join(__dirname, '/build/static/js'),
  filename: 'index.js',
  publicPath: '/'
},


devServer: {
  historyApiFallback: true,
  port: 3000
}

Jeśli używasz go na Google Bucket, prostym rozwiązaniem jest rozważenie „index.html” dla strony z błędem (404 nie znaleziono).

To do so:

1. Na liście zasobników znajdź utworzony zasobnik.
2. Kliknij menu przepełnienia zasobnika (...) powiązane z zasobnikiem i wybierz Edytuj konfigurację witryny.
3. W oknie dialogowym konfiguracji witryny określ również stronę główną jako stronę błędu.

Używając Express na backendzie i React na frontendzie (bez React-create-app) z zasięgiem/routerem, wyświetlany jest poprawny komponent reagowania zasięgu/routera, a link menu jest ustawiony na aktywny styl po naciśnięciu klawisza Enter w pasku adresu np. http://localhost:8050/pages. Proszę o kasę poniżej lub bezpośrednio do mojego repozytorium https://github.com/nickjohngray/staticbackeditor, wszystkie kod tam jest.

Pakiet internetowy:

Skonfiguruj serwer proxy. Pozwala to dowolnym wywołaniom z portu 3000 (React) na wywołanie serwera, w tym wywołanie pobrania index.html lub czegokolwiek w pasku adresu po naciśnięciu klawisza Enter. umożliwia również wywołania trasy API, aby uzyskać dane JSON

jak await axios.post('/api/login', {email, pwd})

devServer: {
    port: 3000,
    open: true,
    proxy: {
      '/': 'http://localhost:8050',
    }
  }

Ustaw trasy ekspresowe

app.get('*', (req, res) => {
    console.log('sending index.html')
    res.sendFile(path.resolve('dist', 'index.html'))

});

To będzie pasować do każdego żądania z React, po prostu zwróci stronę index.html, która znajduje się w moim folderze dist, ta strona ma oczywiście bardziej jednostronicową aplikację React. (uwaga wszystkie inne trasy powinny pojawić się powyżej tego, w moim przypadku są to moje trasy API)

Reaguj Trasy

<Router>
    <Home path="/" />
    <Pages path="pages"/>
    <ErrorPage path="error"/>
    <Products path="products"/>
    <NotFound default />
</Router>

Trasy te są zdefiniowane w moim komponencie Układ, który wczytuje odpowiedni komponent, gdy ścieżka jest zgodna.

Konstruktor React Layout

 constructor(props) {
        super(props);


        this.props.changeURL({URL: globalHistory.location.pathname});
}

Konstruktor układu jest wywoływany zaraz po załadowaniu. Tutaj nazywam mój adres URL zmiany redux, którego moje menu nasłuchuje, dzięki czemu może podświetlić poprawną pozycję menu, jak poniżej:

Kod menu

<nav>
    {this.state.links.map( (link) =>
    <Link className={this.getActiveLinkClassName(link.path) } to={link.path}> 
      {link.name}
    </Link>)}            
</nav>

W moim przypadku adres URL nie ładował się, gdy używałem w nim parametru.

Jako szybką naprawę dodaję <base href="<yourdomain/IP>"></base> pod tagiem pliku index.html w folderze build.

I to właśnie naprawiło mój problem.

Miałem ten sam problem i to rozwiązanie zadziałało dla nas..

Tło:

Udostępniamy wiele aplikacji na tym samym serwerze. Kiedy odświeżymy serwer, nie będzie wiedział, gdzie szukać naszego indeksu w folderze dist dla tej konkretnej aplikacji. Powyższy link zaprowadzi Cię do tego, co dla nas zadziałało... Mam nadzieję, że to pomoże, ponieważ spędziliśmy wiele godzin na szukaniu rozwiązania dla naszych potrzeb.

Używamy:

package.json

"dependencies": {
"babel-polyfill": "^6.23.0",
"ejs": "^2.5.6",
"express": "^4.15.2",
"prop-types": "^15.5.6",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.4",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.8",
"redux": "^3.6.0",
"redux-persist": "^4.6.0",
"redux-thunk": "^2.2.0",
"webpack": "^2.4.1"
}

mój webpack.config.js

webpack.config.js

/* eslint-disable */
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const babelPolyfill = require('babel-polyfill');
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/views/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    'babel-polyfill', './app/index.js'
  ],
  output: {
    path: __dirname + '/dist/your_app_name_here',
    filename: 'index_bundle.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      query : {
          presets : ["env", "react", "stage-1"]
      },
      exclude: /node_modules/
    }]
  },
  plugins: [HTMLWebpackPluginConfig]
}

mój index.js

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import Routes from './Routes'
import { Provider } from 'react-redux'
import { createHistory } from 'history'
import { useRouterHistory } from 'react-router'
import configureStore from './store/configureStore'
import { syncHistoryWithStore } from 'react-router-redux'
import { persistStore } from 'redux-persist'

const store = configureStore();

const browserHistory = useRouterHistory(createHistory) ({
  basename: '/your_app_name_here'
})
const history = syncHistoryWithStore(browserHistory, store)

persistStore(store, {blacklist: ['routing']}, () => {
  console.log('rehydration complete')
})
// persistStore(store).purge()


ReactDOM.render(
    <Provider store={store}>
      <div>
        <Routes history={history} />
      </div>
    </Provider>,
  document.getElementById('mount')
)

moja aplikacja.js

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/dist'));
// app.use(express.static(__dirname + '/app/assets'));
app.set('views', __dirname + '/dist/your_app_name_here');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

app.get('/*', function (req, res) {
    res.render('index');
});

app.listen(8081, function () {
  console.log('MD listening on port 8081!');
});

Podoba mi się ten sposób radzenia sobie z tym. Spróbuj dodać: yourSPAPageRoute/* po stronie serwera, aby pozbyć się tego problemu.

Poszedłem z tym podejściem, ponieważ nawet natywny interfejs API historii HTML5 nie obsługuje poprawnego przekierowywania przy odświeżaniu strony (o ile wiem).

Uwaga: Wybrana odpowiedź już dotyczyła tego, ale staram się być bardziej szczegółowy.

Trasa ekspresowa

Przetestowano i po prostu chciałem się tym podzielić.

Mam nadzieję, że to pomoże.

Załóżmy, że masz następującą definicję trasy domowej

<Route exact path="/" render={routeProps => (
   <Home routeProps={routeProps}/>
)}/>

{/*optional catch-all router */}
<Route render={routeProps => (
       <div><h4>404 not found</h4></div>
)}/>

W komponencie Home możesz przechwycić żądanie na zdarzeniu ComponentWillMount,

const searchPath = this.props.routeProps.location.search;

if (searchPath){
    this.props.routeProps.history.push("/" + searchPath.replace("?",""));
}
else{
    /*.... originally Home event */
}

Teraz, zamiast wywoływać /joblist pod adresem URL, możesz zażądać /?joblist, a składnik automatycznie przekieruje żądanie do /joblist (zwróć uwagę na dodatkowy znak zapytania w ścieżce)

Jeśli przyjeżdżasz tutaj i używasz Apache i nie masz pliku .htaccess, to jest plik konfiguracyjny, który zadziałał dla mnie:

sites-enabled/somedomain.com.conf

<VirtualHost *:80>
    ServerName somedomain.com
    ServerAlias *.somedomain.com
    DocumentRoot /www/somedomain.com/build

    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /www/somedomain.com/build/index.html [L,NC,QSA]

</VirtualHost>

Rozwiązanie dla Preact z routerem preact

Działa z odświeżaniem i bezpośrednim dostępem

Dla tych, którzy odkrywają to przez Google, oto demonstracja historii preact-router + hash:

const { h, Component, render } = preact; /** @jsx h */
const { Router } = preactRouter;
const { createHashHistory } = History;
const App = () => (
    <div>
        <AddressBar />

        <Router history={createHashHistory()}>
            <div path="/">
                <p>
                    all paths in preact-router are still /normal/urls.
                    using hash history rewrites them to /#/hash/urls
                </p>
                Example: <a href="/pl/page2">page 2</a>
            </div>
            <div path="/page2">
                <p>Page Two</p>
                <a href="/pl/">back to home</a><br/>
            </div>
        </Router>
    </div>
);

jsfiddle

Oto odkryte przeze mnie rozwiązanie frontendowe, które nie wymaga modyfikacji niczego na serwerze.

Załóżmy, że Twoja witryna to mysite.com i masz ścieżkę reakcji do mysite.com/about. W index.js, gdzie montujesz komponent najwyższego poziomu, możesz umieścić inny router, taki jak:

ReactDOM.render(
<Router>
    <div>
        <Route exact path="/" component={Home} />
        <Route exact path="/about"
            render={(props) => <Home {...props} refreshRout={"/about"}/>}
        />
    </div>
</Router>,

Zakładam, że oryginalny router znajduje się gdzieś poniżej komponentu najwyższego poziomu w wirtualnym DOM. Musisz również złapać adres URL w swoich .urls, jeśli używasz Django, takich jak:

urlpatterns = [
       path('about/', views.index),
]

Będzie to jednak zależeć od tego, jakiego backendu używasz. Żądanie mysite/about przeniesie Cię do index.js (gdzie montujesz komponent najwyższego poziomu), gdzie możesz użyć właściwości renderowania Route, zamiast właściwości komponentu i przekazać „/about” jako właściwość w tym przykładzie składnik Home.

W Home, w haczyku componentDidMount() lub useEffect(), wykonaj:

useEffect() {   
   //check that this.props.refreshRoute actually exists before executing the 
   //following line    
   this.props.history.replace(this.props.refreshRoute);
}

Założyłem, że Twój komponent Home renderuje coś takiego:

<Router>
   <Route exact path="/" component={SomeComponent} />
   <Route path="/about" component={AboutComponent} />
</Router>

Kredyt dla (Przekaż właściwości do komponentu renderowanego przez React Router) jak przekazać rekwizyty do komponentów w Routes.

Używam .Net Core 3.1 i właśnie dodałem rozszerzenie MapFallbackToController:

Startup.cs

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");

        endpoints.MapFallbackToController("Index", "Home");
    });

Innym sposobem żądania danych, nawet jeśli kierujesz się do adresów URL natychmiast, jest sprawienie, aby każdy komponent miał metodę, która wywołuje ostatnie parametry, takie jak /about/test, a następnie do dostawcy stanu masz funkcję który łączy się z komponentem, za pomocą którego chcesz zażądać danych

Używam trybu React.js + Webpack. Dodałem parametr --history-api-fallback w pliku package.json. Wtedy odświeżanie strony działa poprawnie. Za każdym razem, gdy zmieniam kod, strona internetowa odświeża się automatycznie.

"scripts": {
  "start": "rimraf build && cross-env NODE_ENV='development' webpack --mode development && cross-env NODE_ENV=development webpack-dev-server --history-api-fallback",
  ...
}

Wiem, że na to pytanie udzielono odpowiedzi na śmierć, ale to nie rozwiązuje problemu, w którym chcesz używać routera przeglądarki z proxy pass, gdzie nie możesz korzystać z roota.

Dla mnie rozwiązanie jest dość proste.

powiedz, że masz adres URL wskazujący na jakiś port.

location / {
  proxy_pass http://127.0.0.1:30002/;
  proxy_set_header    Host            $host;
  port_in_redirect    off;
}

a teraz z powodu podścieżek przeglądarki routera są zepsute. Jednak wiesz, jakie są podścieżki.

Rozwiązanie tego? Dla ścieżki podrzędnej /contact

# just copy paste.
location /contact/ {
  proxy_pass http://127.0.0.1:30002/;
  proxy_set_header    Host            $host;
}

Nic innego, co próbowałem, nie działa, ale ta prosta poprawka działa jak cholerny urok.

Miałem do czynienia z tym problemem w Electronie, gdy używałem Reacta do front-endu i react-router-dom do routingu. Zamieniłem BrowserRouter na HashRouter i zostało to naprawione. Oto prosty przykład

import {
  HashRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

HashRouter będzie łatwą implementacją,

import {HashRouter as Router,Switch,Route,Link} from 'react-router-dom';


  function App() {
  return (
    <Router>
        <Switch>
          <Route path="/" exact component={InitialComponent} />
          <Route path="/some" exact component={SomeOtherComponent} />
        </Switch>
      </Router>
  );
}

W przeglądarce będzie to coś takiego: http:localhost:3000/#/ , http:localhost:3000/#/niektóre

Jest to dość proste, gdy nie można uzyskać błędu 403 po odświeżeniu komponentu dom. po prostu dodaj ten jeden wiersz w konfiguracji pakietu internetowego, „historyApiFallback: true”. to savez cały mój dzień.

Pełny router z przykładem (React Router v4):

Przykładowy przykład pracy Sprawdź projekt poniżej.

react-router-4-przykład

Po pobraniu
1.) "npm install" w cmd, aby zainstalować projekt
2.) "npm start", aby uruchomić aplikację React

Uwaga: potrzebujesz oprogramowania Node js do uruchomienia w swoich oknach. Mac OS ma domyślny węzeł.

Twoje zdrowie