React Router Routes v4 ne marche pas

Je suis relativement novice dans les réactions et j'essaie de comprendre comment faire React router travailler. J'ai une application de test super simple qui ressemble à ceci:


import React from 'react';
import ReactDOM from 'react-dom';

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

const Home = // => <h1><link to="/about"/>Click Me</h1>
const About = // => <h1>About Us</h1>

const Test = // => /
<router>
<switch>
<route component="{Home}" path="/"></route>
<route component="{About}" path="/about"></route>
</switch>
</router>
/

ReactDOM.render/<test></test>, document.getElementById/'app'//;


Lorsque je démarre l'application, le composant HOME est chargé sans aucun problème, et lorsque j'appuie sur le lien "Click Me", url Changer localhost/about,, Cependant, rien ne se passe. Si je clique sur le bouton de mise à jour, je recevrai un message "je ne peux GET /about." Il est clair que je fais quelque chose de mal, mais je ne pouvais pas comprendre ce que c'était. J'utilise aussi Webpack.
Invité:

Catherine

Confirmation de:

Vous devez utiliser exactement la voie exacte pour
/

, Sinon, il va aussi correspondre
/about

.


<route component="{Home}" exact="" path="/"></route>


Comme mentionné dans les commentaires, pour quelque chose de tel simple, je suggérerais d'utiliser
https://github.com/facebookinc ... t-app
, qui vérifiera l'exactitude de votre code de serveur et des paramètres webpack. Dès que vous utilisez
create-react-app

, Vous avez juste besoin d'utiliser
npm

Pour installer le paquet react router v4, puis placez votre code ci-dessus dans le fichier
App.js

, Et il doit travailler. Il y a quelques petits changements dans votre code pour le faire fonctionner avec
create-react-app

, Comme indiqué ci-dessous:


// App.js
import React from 'react';

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

const Home = // => <h1><link to="/about"/>Click Me</h1>
const About = // => <h1>About Us</h1>

const App = // => /
<router>
<switch>
<route component="{Home}" exact="" path="/"></route>
<route component="{About}" path="/about"></route>
</switch>
</router>
/

export default App;


https://reacttraining.com/reac ... start
Vous vous direz presque la même chose que je viens d'expliquer.

Giselle

Confirmation de:

Si vous travaillez avec localhost, Vous devez ajouter historyApiFallback: true Dans votre dossier webpack.config

Agathe

Confirmation de:

Vous pouvez également résoudre ce problème en enregistrant la route par défaut à la fin.


<route component="{About}" path="/about"></route>



<route component="{Home}" path="/"></route>

// Toujours à la fin

Pas besoin de mettre un mot clé
exact

Blanche

Confirmation de:

Peut-être que cela aidera quelqu'un. J'ai oublié d'utiliser la bonne histoire, au lieu d'utiliser
Router

, j'ai utilisé
BrowserRouter

, Qui ignore la propriété
history={...}

, Utiliser le sien. J'ai essayé de rediriger la page avec ma main créée par l'histoire, mais
BrowserRouter

Utilisé le mien.

Emilie

Confirmation de:

Si ajoute
exact

Ne résout pas le problème, je l'ai remplacé sur


<route component="{App}" exact="" path="/"></route>
<route component="{Login}" path="/login"></route>
<route component="{Register}" path="/register"></route>


Ce


<route exact="" path="/"> <app></app> </route>
<route path="/login"> <login></login> </route>
<route path="/register"> <register></register> </route>


Placer un composant comme voie d'enfant résolvant mon routage de page J'espère que cela aidera quelqu'un d'autre

Blanche

Confirmation de:

Utilisant

Switch

Nous devons garder à l'esprit que nous spécifions la composante de la route qui ira de

Le plus spécifique

avant que

Le plus commun

. Dans votre cas, vous avez indiqué "/" de face "/about"., Par conséquent, chaque fois react À la recherche de "/about", Mais descendre <route "="" 'react';="" 'react-dom';="" 'react-router-dom';="" ,="" ==""
import="" about"="" about".="" alors="" as="" const="" de="" donc,="" et="" exact="" face="" from="" home="//" i.="" import="" indexroute,="" link}="" pouvez="" react="" reactdom="" route,="" router,="" réduire="" satisfait="" switch,="" utilisez:="" vous="" {browserrouter=""> <h1><link to="/about"/>Click Me</h1>
const About = // =&gt; <h1>About Us</h1>

const Test = // =&gt; /
<router>
<switch>
<route component="{About}" path="/about"></route>
<route component="{Home}" path="/"></route>
</switch>
</router>
/

ReactDOM.render/<test></test>, document.getElementById/'app'//;


</route>

Pour répondre aux questions, connectez-vous ou registre