Trasy React Router v4 nie działają


Jestem stosunkowo nowy w reagowaniu i próbuję dowiedzieć się, jak uruchomić router React. Mam super prostą aplikację testową, która wygląda tak:
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 ="/" component = {Home}/>
<Route path ="/about" component = {About}/>
</Switch>
</Router>)ReactDOM.render(<Test/>, document.getElementById('app'));

kiedy uruchamiam aplikację, komponent domowy ładuje się bez problemu, a kiedy klikam łącze „Kliknij mnie”, adres URL zmienia się na localhost/about, jednak nic się nie dzieje. Jeśli kliknę przycisk Odśwież, pojawi się komunikat „Nie mogę POBRAĆ/informacje”. jasne jest, że robię coś złego, ale nie mogłem dowiedzieć się, co dokładnie. Używam również Webpacka.
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

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.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

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

Anonimowy użytkownik

Potwierdzenie od:

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
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

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.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

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
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

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

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się