Réagir Routeur v4 routes ne fonctionne pas

Je suis relativement nouveau à réagit et je suis à essayer de comprendre comment obtenir Réagir routeur de travail. J'ai un super test simple application 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'));

quand je lance l'application de la composante accueil se charge sans aucun problème, et quand je clique sur le "Cliquez-Moi" lien les changements de l'url localhost/, cependant rien ne se passe. Si je clique sur actualiser, je reçois un "Ne peut pas OBTENIR /about." Clairement, je suis en train de faire quelque chose de mal mais je n'ai pas été en mesure de comprendre quoi. Je suis également en utilisant Webpack.

  • Existe-il des messages dans la console? Il peut être un problème avec le About composant et pas le routeur lui-même. Aussi, essayez de mettre la About composant sur le / chemin pour voir ce qui se passe.
  • RE: Impossible d'OBTENIR /au sujet de: Envisager d'utiliser créer-réagir-app. C'est facebook béni et rend la partie serveur de ce travail hors de la boîte en développement, parmi beaucoup d'autres de développement subtilités. Sans elle, vous avez besoin pour gérer le routage tout à index.html vous-même, ou utiliser le hachage routeur à réagir-routeur.
InformationsquelleAutor WebbH | 2017-04-17
  1. 18

    Vous devez utiliser un chemin d'accès exact pour / sinon, il correspond aussi à la /about.

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

    Comme mentionné dans les commentaires, pour quelque chose d'aussi simple, je voudrais suggérer à l'aide de Créer Réagir App qui sera assurez-vous que votre code serveur et votre webpack paramètres sont tous corrects. Une fois que vous utilisez create-react-app vous aurez juste besoin d'utiliser npm pour installer le réagir routeur v4 paquet, puis placez le code ci-dessus dans le App.js fichier et cela devrait fonctionner. Il y a quelques petits changements à votre code pour qu'il fonctionne 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;

    La instructions de démarrage rapide de Réagir Routeur V4 documentation vous dira à peu près la même chose que je viens de vous expliquer.

    • Um excusez-moi, mais je vais avoir un problème similaire, bien que j'ai ajouté exacte et sa ne fonctionne toujours pas
    • Vous devriez ouvrir une nouvelle question et de nous donner le code que vous utilisez qui permettront de reproduire votre problème.
    • Le code est similaire, sauf que je suis l'importation de composants à partir d'un autre fichier. Par la voie de l'actualisation de la deuxième composant de la page est rendue .
    InformationsquelleAutor Todd Chaffee
  2. 16

    Si vous êtes en cours d'exécution à partir de localhost, vous devez ajouter historyApiFallback: fidèle à votre webpack.fichier de configuration

    • C'était mon problème!! Je vous remercie.
    • Un peu plus d'informations autour de ce serait vraiment utile!
    • comment mettre en oeuvre cette si avec de création de réagir-app? et est-il un problème si votre pile est déployé sur un serveur public? J'obtiens les mêmes questions à la fois local et sur mon serveur
    • Ce doit être ajouté à docs, je n'aurais jamais connu ce. Été tirant mes cheveux au cours de cette.
    • je n'ai pas de webpack.fichier de configuration. Que dois-je faire?
    • merci beaucoup aidé moi aussi 🙂

    InformationsquelleAutor VineFreeman
  3. 0

    Peut-être que ça peut aider quelqu'un. J'ai oublié d'utiliser le bon de l'histoire, au lieu d'utiliser le Router j'ai été en utilisant le BrowserRouter qui ignore la propriété history={...} l'utilisation de son propre. J'ai essayé de rediriger la page avec mon créés manuellement à l'histoire, mais BrowserRouter a l'aide de son propre.

    InformationsquelleAutor Marcelo Rafael