Trasy React Router v4 nie działają

Musisz użyć dokładnej ścieżki dla

/

, w przeciwnym razie będzie pasować również do

/ about

.

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

Jak wspomniano w komentarzach, w przypadku czegoś tak prostego sugerowałbym użycie

Utwórz aplikację React
https://github.com/facebookinc ... t-app
który zweryfikuje Twój kod po stronie serwera i ustawienia pakietu internetowego. Gdy użyjesz

create-aware-app

, wystarczy użyć

npm

, aby zainstalować pakiet reakcji routera v4, a następnie umieścić powyższy kod w pliku

App.js

i powinno działać. Wprowadzono kilka drobnych zmian w kodzie, aby działał z aplikacją

create-react-app

, jak poniżej: [/code]

// App.js

import React from 'react';import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';const Home = () => [b]<Link to="/about">Click Me</Link>[/b]>

const About = () => [b]About Us[/b]>const App = () => ( <Router>

 <Switch>

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

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

 </Switch>

 </Router>)export default App;

Instrukcje szybkiego startu z dokumentacji React Router V4
https://reacttraining.com/reac ... start
powiem ci prawie to samo, co właśnie wyjaśniłem.

Jeśli pracujesz z localhost, musisz dodać historyApiFallback: true do pliku webpack.config

Możesz również rozwiązać ten problem, zachowując domyślną trasę zawsze na końcu

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

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

// zawsze na końcu
Nie ma potrzeby umieszczania słowa kluczowego

exact

Może to komuś pomoże. Zapomniałem użyć poprawnej historii, zamiast używać

Router

, użyłem

BrowserRouter

, który ignoruje właściwość

history = {...}

do użycia jego własny. Próbowałem przekierować stronę z moją ręcznie wygenerowaną historią, ale

BrowserRouter

używał własnej.

jeśli dodanie

exact

nie rozwiązuje problemu, zastąpiłem to

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

 <Route path="/login" component={Login}/>

 <Route path="/register" component={Register}/>

To

<Route exact path="/"> <App/> </Route>

 <Route path="/login"> <Login/> </Route>

 <Route path="/register"> <Register/> </Route>

umieszczenie komponentu jako trasy podrzędnej rozwiązuje routing mojej strony, mam nadzieję, że pomoże to również komuś innemu

Za pomocą

Switch

musimy pamiętać, że określamy komponent trasy, z którego będzie pochodzić

najbardziej szczegółowe

przed

Najpopularniejszy
... W twoim przypadku podałeś „/” przed „/ około”., Więc za każdym razem, gdy reakcja szuka „/ około”, ale zejście w dół & < Trasa ”/„ pasuje do „/ około”.
Więc użyj:

"/about"

z przodu

"/"

Więc możesz pominąć

precyzyjny
, i

import React from 'react';

import ReactDOM from 'react-dom';import {BrowserRouter as Router, Route, Switch, IndexRoute, Link} from 'react-router-dom';const Home = () => [b]<Link to= "/about">Click Me</Link>[/b]>

const About = () => [b]About Us[/b]>const Test = () => ( <Router>

 <Switch>

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

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

 </Switch>

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