web-dev-qa-db-fra.com

Les routes React Router v4 ne fonctionne pas

Je suis relativement nouveau à réagir et j'essaie de comprendre comment faire fonctionner le routeur React. J'ai une application de test très 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</Link></h1>
const About = () => <h1>About Us</h1>

const Test = () => (
  <Router>
    <Switch>
    <Route path ="/" component = {Home} />
    <Route path ="/about" component = {About} />
    </Switch>
  </Router>
)

ReactDOM.render(<Test />, document.getElementById('app'));

lorsque je lance l'application, le composant d'accueil se charge sans problème, et lorsque je clique sur le lien "Cliquez sur moi", les modifications apportées à l'URL changent en localhost/about, mais rien ne se passe. Si je clique sur rafraîchir, je reçois le message "Je ne peux pas obtenir/environ" Clairement, je fais quelque chose de mal mais je n'ai pas été capable de comprendre quoi. J'utilise aussi Webpack.

reactjsreact-routerreact-router-v4
11
WebbH

Vous devez utiliser un chemin exact pour / sinon il correspondra également à /about.

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

Comme mentionné dans les commentaires, pour quelque chose d'aussi simple, je suggérerais d'utiliser Create React App , ce qui vous assurera que le code de votre serveur et les paramètres de votre pack Web sont tous corrects. Une fois que vous avez utilisé create-react-app, il vous suffit d’utiliser npm pour installer le package du routeur réactif v4, puis placez votre code ci-dessus dans le fichier App.js. Quelques petites modifications ont été apportées à votre code pour le faire fonctionner avec create-react-app, comme on peut le voir 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</Link></h1>
const About = () => <h1>About Us</h1>

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
)

export default App;

Les instructions de démarrage rapides de la documentation de React Router V4 vous indiqueront à peu près les mêmes choses que celles que je viens d’expliquer.

16
Todd Chaffee

Si vous utilisez localhost, vous devez ajouter historyApiFallback: true à votre fichier webpack.config.

16
VineFreeman

Peut-être que cela peut aider quelqu'un. J'ai oublié d'utiliser l'historique approprié, au lieu d'utiliser la variable Router J'utilisais la variable BrowserRouter qui ignore la propriété history={...} pour utiliser la sienne. J'essayais de rediriger la page avec mon historique créé manuellement, mais BrowserRouter utilisait son propre historique.

0
Marcelo Rafael