web-dev-qa-db-de.com

Reagieren Sie Routen des Routers 4 nicht

Ich bin relativ neu zu reagieren und versuche herauszufinden, wie man den React-Router zum Laufen bringt. Ich habe eine super einfache Test-App, die so aussieht:

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

wenn ich die App starte, wird die Home-Komponente problemlos geladen, und wenn ich auf den Link "Click Me" klicke, ändert sich die URL in localhost/about, jedoch passiert nichts. Wenn ich auf "Aktualisieren" klicke, bekomme ich ein "Canet GET/about". Klar mache ich etwas falsch, aber ich konnte nicht herausfinden, was. Ich benutze auch Webpack.

11
WebbH

Sie müssen einen genauen Pfad für / verwenden. Andernfalls stimmt auch /about überein.

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

Wie in den Kommentaren erwähnt, würde ich für so einfache Dinge vorschlagen, Create React App zu verwenden, um sicherzustellen, dass der Servercode und die Webpack-Einstellungen alle korrekt sind. Sobald Sie create-react-app verwenden, müssen Sie lediglich das Paket npm verwenden, um das Paket reaktiver Router v4 zu installieren, und dann den Code oben in die Datei App.js einfügen. Es gibt einige kleine Änderungen an Ihrem Code, damit er mit create-react-app funktioniert, wie unten gezeigt:

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

Die Schnellstartanweisungen aus der React Router V4-Dokumentation werden Ihnen ziemlich genau dasselbe erklären, wie ich es gerade erklärt habe.

16
Todd Chaffee

Wenn Sie localhost ausführen, müssen Sie der Datei webpack.config historyApiFallback: true hinzufügen

16
VineFreeman

Vielleicht kann es jemandem helfen. Ich habe vergessen, die richtige Historie zu verwenden, anstatt die Router zu verwenden. Ich verwendete die BrowserRouter, die die Eigenschaft history={...} ignoriert, um ihre eigene zu verwenden. Ich habe versucht, die Seite mit meinem manuell erstellten Verlauf umzuleiten, BrowserRouter verwendete jedoch einen eigenen.

0
Marcelo Rafael