Adresele URL ale routerului React nu funcționează când se reîmprospătează sau se scrie manual

Dacă găzduiți o aplicație react prin AWS Static S3 Hosting și CloudFront

Această problemă a apărut de către CloudFront care a răspuns cu un mesaj 403 Acces refuzat, deoarece se aștepta ca /some/other/path să existe în folderul meu S3, dar acea cale există doar intern în rutarea React cu react-router.

Soluția a fost configurarea unei reguli de distribuire a paginilor de eroare. Accesați setările CloudFront și alegeți distribuția. Apoi accesați fila „Pagini de eroare”. Faceți clic pe „Creați un răspuns de eroare personalizat” și adăugați o intrare pentru 403, deoarece acesta este codul de stare de eroare pe care îl primim. Setați Calea paginii de răspuns la /index.html și codul de stare la 200. Rezultatul final mă uimește prin simplitatea sa. Pagina de index este difuzată, dar URL-ul este păstrat în browser, așa că odată ce aplicația react se încarcă, detectează calea URL și navighează la ruta dorită.

Regula 403 pentru paginile de eroare

Acest lucru vă poate rezolva problema

M-am confruntat cu aceeași problemă și în aplicația ReactJS în modul Production. Iată a doua soluție la problemă.

1.Schimbați istoricul de rutare în hashHistory în loc de browserHistory în locul lui

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

Acum construiți aplicația folosind comanda

sudo npm run build

Apoi plasați folderul de compilare în folderul dvs. var/www/. Acum, aplicația funcționează bine cu adăugarea etichetei # în fiecare URL. ca

localhost/#/home localhost/#/aboutus

Soluția 2: fără eticheta # folosind browserHistory,

Setați-vă istoricul = {browserHistory} în routerul dvs., acum construiți-l folosind sudo npm run build.

Trebuie să creați fișierul conf pentru a rezolva pagina 404 negăsit, fișierul conf ar trebui să fie așa.

deschideți terminalul, introduceți comenzile de mai jos

cd /etc/apache2/sites-available ls nano sample.conf Adăugați conținutul de mai jos în el.

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

Acum trebuie să activați fișierul sample.conf utilizând următoarea comandă

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

apoi vă va cere să reîncărcați serverul apache, folosind sudo service apache2 reload sau restart

apoi deschideți folderul localhost/build și adăugați fișierul .htaccess cu conținutul de mai jos.

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

Acum aplicația funcționează normal.

Notă: schimbați 0.0.0.0 IP la adresa IP locală.

Dacă aveți îndoieli cu privire la acest lucru, nu ezitați să faceți un comentariu.

Sper să fie de ajutor altora.

Dacă vă găzduiți aplicația react pe IIS, trebuie doar să adăugați un fișier web.config care conține:

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

Acest lucru va spune serverului IIS să returneze pagina principală către client în loc de eroarea 404 și nu este nevoie să folosească istoricul hash.

Webpack Dev Server are o opțiune pentru a activa acest lucru. Deschideți package.json și adăugați --history-api-fallback. Aceste soluții au funcționat pentru mine.

react-router- tutorial

Stiva de producție: React, React Router v4, BrowswerRouter, Express, Nginx

1) Utilizator BrowserRouter pentru URL-uri frumoase

// app.js

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

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

2) Adăugați index.html la toate solicitările necunoscute folosind /*

// 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) pachet webpack cu webpack -p

4) rulați nodemon server.js sau node server.js

EDIT: Poate doriți să lăsați nginx să se ocupe de acest lucru în blocul serverului și să ignorați pasul 2:

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

Adăugați asta la webpack.config.js:

devServer: {
    historyApiFallback: true
}

Încercați să adăugați fișierul „.htaccess” în folderul public cu codul de mai jos.

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

RewriteRule ^ /index.html [L]  

Dacă aveți o alternativă la index.html, asigurați-vă că în fișierul index.html aveți acest lucru:

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

Acest lucru poate diferi de la proiect la proiect.

Dacă utilizați firebase, tot ce trebuie să faceți este să vă asigurați că aveți o proprietate de rescriere în fișierul firebase.json din rădăcina aplicației dvs. (în secțiunea de găzduire).

De exemplu:

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

Sper că acest lucru salvează pe altcineva un tezaur de frustrare și timp pierdut.

Codare fericită...

Citiri suplimentare despre subiect:

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

Firebase CLI: Configurați ca o aplicație cu o singură pagină (rescrieți toate adresele URL în /index.html)

Pentru cei care folosesc IIS 10, acesta este ceea ce ar trebui să faceți pentru a face acest lucru corect. Asigurați-vă că utilizați browserHistory cu aceasta. Ca referință, voi da codul pentru rutare, dar nu acesta este ceea ce contează, ceea ce contează este următorul pas după codul componentei de mai jos:

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

Deoarece problema este că IIS primește o solicitare de la browserele client, va interpreta URL-ul ca și cum ar solicita o pagină, apoi returnează o pagină 404, deoarece nu există o pagină disponibilă. Urmează următoarele instrucțiuni:

1. Deschideți IIS
2. Extindeți Server, apoi deschideți folderul Sites
3. Faceți clic pe site-ul web/aplicație
4. Accesați paginile de eroare
5. Deschideți elementul de stare de eroare 404 din listă
6. În loc de opțiunea „Inserați conținut din fișierul static în răspunsul la eroare”, schimbați-o în „Executați o adresă URL pe acest site” și adăugați valoarea bară „/” la adresa URL.

Și acum va funcționa bine.

Sper că ajută. :-)

Am găsit soluția pentru SPA-ul meu cu router de reacție (Apache). Doar adăugați .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>

sursă: https://gist.github.com/alexsasharegan/173878f9d67049fa7136049>4540000000000000000000000000000000000000000000000000

Nu folosesc încă redarea pe partea serverului, dar am întâlnit aceeași problemă ca OP, unde Link părea să funcționeze bine de cele mai multe ori, dar nu a reușit când aveam un parametru. Voi documenta soluția mea aici pentru a vedea dacă ajută pe cineva.

Jsx-ul meu principal conține asta:

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

Acest lucru funcționează bine pentru primul link de potrivire, dar când :id se modifică în expresiile <Link> imbricate pe pagina de detalii a modelului respectiv, adresa URL se modifică în bara de browser, dar conținutul paginii nu s-a modificat inițial pentru a reflecta modelul legat.

Problema a fost că am folosit props.params.id pentru a seta modelul în componentDidMount. Componenta este montată doar o dată, așa că acest lucru înseamnă că primul model este cel care se lipește pe pagină, iar Link-urile ulterioare schimbă recuzita, dar lasă pagina neschimbată.

Setarea modelului în starea componentei atât în ​​componentDidMount, cât și în componentWillReceiveProps (unde se bazează pe următoarele elemente de recuzită) rezolvă problema și conținutul paginii se modifică pentru a reflecta modelul dorit.

Acest subiect este puțin vechi și rezolvat, dar aș dori să vă sugerez o soluție simplă, clară și mai bună. Funcționează dacă utilizați un server web.

Fiecare server web are capacitatea de a redirecționa utilizatorul către o pagină de eroare în cazul http 404. Pentru a rezolva această problemă, trebuie să redirecționați utilizatorul către pagina de index.

Dacă utilizați serverul de bază Java (tomcat sau orice server de aplicații java), soluția ar putea fi următoarea:

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>

Exemplu:

• GET http://example.com/about
• Serverul web aruncă http 404 deoarece această pagină nu există pe partea serverului
• configurația paginii de eroare spune serverului care trimite pagina index.jsp înapoi utilizatorului
• apoi JS va face restul lucrării din partea clientului, deoarece adresa URL din partea clientului este încă http://example.com/about.

Asta este, nu mai e nevoie de magie :)

Dacă utilizați Express sau un alt cadru în backend , puteți adăuga configurația similară ca mai jos și puteți verifica calea publică Webpack în configurație, ar trebui să funcționeze bine chiar și la reîncărcare dacă utilizați BrowserRouter

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

Remedierea erorii „nu se poate GET /URL” la reîmprospătare sau la apelarea directă a adresei URL.

Configurați webpack.config.js pentru a vă aștepta la legătura dată rutele ca acesta.

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

poți încerca să citești toate acestea, deși nu sunt ale mele:

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

Remedierea rutei aplicației Acum iată cum să remediați în sfârșit rutarea. Pentru a-i spune lui Apache să redirecționeze cererile către index.html unde se află aplicația noastră, trebuie să modificăm fișierul .htaccess. Dacă nu există încă un astfel de fișier în dosarul aplicației dvs., creați-l.

Apoi asigurați-vă că ați introdus acele 4 linii care vă vor face ca rutarea să funcționeze în mod magic.

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

După ce punem acel fișier .htaccess în același director cu index.html, Apache va redirecționa fiecare cerere nouă direct către aplicația dvs.

Bonus: implementarea aplicației React într-un subdirector

Dacă implementați aplicația într-un subdirector, deci este accesibilă, de ex. prin https://myapp.com/the-app, veți observa în curând că există un alt problema. Fiecare clic către o rută nouă va transforma adresa URL în ceva de genul https://myapp.com/route-abc – care se va rupe din nou după o reîncărcare. Dar există o soluție simplă pentru asta:

BrowserRouter are o propă numită basename unde puteți specifica calea subdirectorului:

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

Folosirea HashRouter a funcționat pentru mine și cu Redux, pur și simplu înlocuiți:

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

Dacă utilizați comanda create-react-app,

pentru a genera o aplicație react, atunci package.json trebuie să aibă o modificare pentru a rula corect producția React SPA într-un browser. Deschideți package.json și adăugați următorul segment de cod la acesta,

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

Aici cea mai importantă parte este --history-api-fallback pentru a activa istoricul apel înapoi API.

Uneori, veți primi o eroare 404 dacă utilizați Spring sau orice alt API back-end. Deci, într-o astfel de situație, trebuie să aveți un controler în back-end pentru a redirecționa orice solicitare (doriți) către fișierul index.html pentru a fi gestionat de react-router. În continuare, demonstrează un exemplu de controler scris folosind spring.

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

de exemplu, dacă luăm un punct final REST API back-end ca abc (http://localhost:8080/abc/**), orice solicitare care vine la acel punct final va redirecționa către aplicația react (fișier index.html) și react- routerul se va ocupa de aceste postfaze.

În cazul în care, cineva este aici în căutarea unei soluții pentru React JS SPA cu Laravel. Răspunsul acceptat este cea mai bună explicație a motivului pentru care apar astfel de probleme. După cum sa explicat deja, trebuie să configurați atât partea client, cât și partea serverului. În șablonul blade, includeți fișierul js inclus, asigurați-vă că utilizați URL facade astfel

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

În traseele dvs., asigurați-vă că adăugați acest lucru la punctul final principal unde se află șablonul blade. De exemplu,

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

Cele de mai sus este punctul final principal pentru șablonul lamă. Acum adăugați și un traseu opțional,

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

Problema care se întâmplă este că mai întâi se încarcă șablonul blade, apoi routerul de reacție. Deci, când încărcați '/setting-alerts', se încarcă html și js. Dar când încărcați '/setting-alerts/about', se încarcă mai întâi pe partea serverului. Deoarece pe partea serverului, nu există nimic în această locație, se întoarce negăsit. Când aveți acel router opțional, acesta încarcă aceeași pagină și routerul react se încarcă, apoi react loader decide ce componentă să afișeze. Sper că acest lucru vă ajută.

Pe măsură ce folosesc .Net Core MVC, ceva de genul acesta m-a ajutat:

    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");
        }
   }

Practic, în partea MVC, toate rutele care nu se potrivesc se vor încadra în Home/Index așa cum a specificat în startup.cs. În Index este posibil să obțineți adresa URL a solicitării originale și să o transmiteți oriunde este necesar.

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" });
        });

Dacă găzduiți în IIS; Adăugarea acestui lucru la configurația mea web mi-a rezolvat problema

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

Puteți face configurații similare pentru orice alt server

Pentru aceia dintre voi care sunteți aici pentru că încercați să difuzați o aplicație react dintr-un director virtual IIS (nu rădăcina unui site web), atunci aceasta poate fi pentru dvs.

Când configurați redirecționările dvs. „/” nu va funcționa de la sine, pentru mine avea nevoie și de numele directorului virtual acolo. Iată cum arăta configurația mea web:

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

Pe lângă fișierul web.config, aplicația react are nevoie de câteva modificări:

în package.json trebuie să adăugați o intrare „pagină de pornire”:

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

Am adăugat numele de bază la obiectul istoric al browserului meu pe care îl transmit în router pentru a avea acces la istorie:

import  {createBrowserHistory } from 'history';

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

Am adăugat și această proprietate pe routerul meu React în App.js:

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

În cele din urmă, în index.html am adăugat următoarea filă deasupra etichetei „title”.

  <base href="%PUBLIC_URL%/">

s-ar putea ca unii pași să fie nevoie de notă, dar acest lucru pare să fi făcut treaba pentru mine. Nu știu cum să-l configurez să ruleze fie în rădăcina unui site, fie într-un director virtual fără o recompilare, deși pagina de pornire din package.json nu poate fi schimbată după o construcție, din câte știu eu.

Răspunsuri cu adevărat minunate deja!! Dar dacă găzduiți folosind nginx și aveți nevoie de o remediere rapidă... adăugați următoarea linie la configurația dvs. nginx în blocul de locație

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

Adăugarea mai multor informații la răspunsul lui Joshua Dyck.

Dacă utilizați Firebase și doriți să utilizați atât ruta rădăcină, cât și ruta sub-director, trebuie să adăugați următorul cod în firebase.json:

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

Exemplu:

Construiți un site web pentru un client. Doriți ca proprietarul site-ului web să adauge informații în https://your.domain.com/management în timp ce utilizatorii site-ului web vor naviga la https://your.domain.com.

În acest caz, fișierul dvs. firebase.json va arăta astfel:

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

Folosesc WebPack, am avut aceeași problemă Soluție => În fișierul 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();
  });

De ce nu Aplicația mea nu se redă după reîmprospătare?

Am folosit abordarea de gestionare 404 a expresului

// 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'));
});

Funcționează ca un farmec. O demonstrație live este site-ul nostru

Am rezolvat această problemă schimbând webpack.config.js.

noua mea configurație arată astfel:

Înainte de :

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


devServer: {
  port: 3000
}

După:

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


devServer: {
  historyApiFallback: true,
  port: 3000
}

În cazul în care îl rulați pe un Google Bucket, soluția simplă pentru aceasta este să luați în considerare „index.html” pentru Pagina de eroare (404 nu a fost găsită).

To do so:

1. În lista de găleți, găsiți găleata pe care ați creat-o.
2. Faceți clic pe meniul Bucket overflow (...) asociat cu bucket și selectați Editați configurația site-ului web.
3. În dialogul de configurare a site-ului web, specificați și pagina principală ca pagină de eroare.

Folosind Express pe backend și React pe front-end (fără react-create-app) cu atingere/router, este afișată componenta corectă de reacție a traseului de acoperire/router, iar linkul de meniu este setat la stilul activ atunci când apăsați enter în bara de adrese de exemplu http://localhost:8050/pages. Vă rugăm să verificați mai jos sau direct la depozitul meu https://github.com/nickjohngray/staticbackeditor, toate codul este acolo.

Pachet web:

Configurați proxy. Acest lucru permite oricăror apeluri din portul 3000 (React) să apeleze serverul, inclusiv apelul pentru a obține index.html sau orice altceva din bara de adrese atunci când este apăsată tasta Enter. permite, de asemenea, apeluri către ruta API, pentru a obține date JSON

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

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

Configurați rute expres

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

});

Aceasta se va potrivi cu orice solicitare de la react, doar returnează pagina index.html, care se află în folderul meu dist, această pagină, desigur, are o aplicație react cu o singură pagină. (rețineți că orice alte rute ar trebui să apară deasupra acesteia, în cazul meu, acestea sunt rutele mele API)

Rute de reacție

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

Aceste rute sunt definite în componenta mea Layout care va încărca componenta corespunzătoare atunci când calea se potrivește.

Constructorul React Layout

 constructor(props) {
        super(props);


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

constructorul Layout este apelat de îndată ce se încarcă. Aici îmi numesc acțiunea redux changeURL pe care o ascultă meniul, astfel încât să poată evidenția elementul corect de meniu, ca mai jos:

Codul de meniu

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

În cazul meu, adresa URL nu se încărca când foloseam parametrul în ea.

Ca o remediere rapidă, adaug <base href="<yourdomain/IP>"></base> sub eticheta fișierului index.html în folderul de compilare.

Și asta tocmai mi-a rezolvat problema.

Am avut aceeași problemă și aceasta soluția a funcționat pentru noi..

Fundal:

Găzduim mai multe aplicații pe același server. Când am reîmprospăta, serverul nu ar înțelege unde să caute indexul nostru în folderul dist pentru respectiva aplicație. Link-ul de mai sus vă va duce la ceea ce a funcționat pentru noi... Sper că acest lucru vă va ajuta, deoarece am petrecut destul de multe ore pentru a găsi o soluție pentru nevoile noastre.

Noi folosim:

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

meu 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]
}

indexul meu.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')
)

aplicația mea.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!');
});

Îmi place acest mod de a o manipula. Încercați să adăugați: yourSPAPageRoute/* pe partea de server pentru a scăpa de această problemă.

Am urmat această abordare deoarece nici măcar API-ul nativ HTML5 History nu acceptă redirecționarea corectă la reîmprospătarea paginii (din câte știu eu).

Notă: răspunsul selectat a abordat deja acest lucru, dar încerc să fiu mai specific.

Rută expres

Am testat și am vrut doar să distribui asta.

Sper ca ajuta.

Să presupunem că aveți următoarea definiție a rutei de acasă

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

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

La componenta dvs. Acasă, puteți intercepta cererea la evenimentul ComponentWillMount,

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

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

Acum, în loc să apelați /joblist la adresa URL, puteți solicita /?joblist, iar Componenta va redirecționa automat solicitarea către /joblist (rețineți semnul de întrebare suplimentar din cale)

Dacă veniți aici și utilizați apache și nu aveți un fișier .htaccess, acesta este un fișier de configurare care a funcționat pentru mine:

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>

Soluție pentru Preact cu preact-router

Funcționează cu reîmprospătare și acces direct

Pentru cei care descoperă acest lucru prin Google, iată o demonstrație a istoricului 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="/ro/page2">page 2</a>
            </div>
            <div path="/page2">
                <p>Page Two</p>
                <a href="/ro/">back to home</a><br/>
            </div>
        </Router>
    </div>
);

jsfiddle

Iată o soluție frontală pe care am descoperit-o, care nu necesită modificarea nimic pe server.

Să presupunem că site-ul dvs. este mysite.com și aveți o rută de reacție către mysite.com/about. În index.js, unde montați componenta dvs. de nivel superior, puteți pune un alt Router precum:

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

Presupun că aveți routerul original situat undeva sub componenta de nivel superior în DOM-ul virtual. De asemenea, trebuie să prindeți adresa URL în .urls-ul dvs. dacă utilizați Django, cum ar fi:

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

Totuși, aceasta va depinde de ce backend utilizați. Solicitarea mysite/about vă va duce în index.js (unde montați componenta de nivel superior) unde puteți utiliza prop de randare a Rutei, mai degrabă decât prop de componentă, și transmiteți „/about” ca prop la, în acest exemplu, componenta Acasă.

În Acasă, fie în componentDidMount() fie în cârligul useEffect(), faceți:

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

Am presupus că componenta dvs. Acasă redă ceva de genul:

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

Credit către (Trimite elemente de recuzită către o componentă redată de React Router) pentru a transmite elemente de recuzită componentelor din Routes.

Folosesc .Net Core 3.1 și tocmai am adăugat extensia MapFallbackToController:

Startup.cs

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

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

Cealaltă modalitate de a solicita date, chiar dacă direcționați imediat către adrese URL, este să faceți ca fiecare componentă să aibă o metodă care apelează la acei ultimi parametri precum /about/test și apoi la furnizorul dvs. de stat aveți funcția care se conectează la componenta cu care doriți să solicitați date

Folosesc modul React.js + Webpack. Am adăugat parametrul --history-api-fallback în fișierul package.json. Apoi, reîmprospătarea paginii funcționează corect. Fiecare când schimb codul, pagina web se reîmprospătează automat.

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

Știu că la această întrebare s-a răspuns până la moarte, dar nu rezolvă problema în care doriți să utilizați routerul browserului cu trecerea proxy, unde nu puteți utiliza root.

Pentru mine solutia este destul de simpla.

spuneți că aveți o adresă URL care indică un port.

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

iar acum, din cauza browserului, căile secundare ale routerului sunt întrerupte. Cu toate acestea, știți care sunt căile secundare.

Soluția la asta? Pentru calea secundară /contact

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

Nimic altceva din ce am încercat funcționează, dar această soluție simplă funcționează ca un farmec al naibii.

Mă confruntam cu această problemă în Electron când foloseam React pentru front-end și react-router-dom pentru rutare. Am înlocuit BrowserRouter cu HashRouter și s-a remediat. Iată un exemplu simplu

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

HashRouter va fi o implementare ușoară,

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

Va fi ceva de genul acesta în browser - http:localhost:3000/#/ , http:localhost:3000/#/some

Este destul de simplu când nu ați primit eroarea 403 după reîmprospătarea componentei dom. doar adăugați această linie în configurația pachetului dvs. web, „historyApiFallback: true”. asta îmi salvează toată ziua.

Router complet cu exemplu (React Router v4):

Exemplu de lucru Exemplu Consultați proiectul de mai jos.

react-router-4-example

După descărcare
1.) „npm install” în cmd pentru a instala proiectul
2.) „npm start” pentru a porni aplicația ta react

Notă: aveți nevoie de software-ul Node js pentru a rula în Windows. Mac OS are un nod implicit.

Noroc