React的URL改变了，但是组件没有呈现

Question

如果我进入"/"或"/details"在浏览器中手动重新加载页面，一切都很好。

如果我进入"/"或"/details"使用导航条链接，URL会改变，但内容不会呈现。

我试过使用"exact"关键词at "/details"路由，但它是相同的。

React-router-dom: Version: 5.1

App.js:

import { BrowserRouter , Redirect, Route , Switch } from 'react-router-dom';
import './App.css';
import Navbar from './Navbar.js'
import Home from './pages/Home'
import Details from './pages/Details';

function App() {
return (
<div className="App">
<BrowserRouter>
<Navbar />
<Switch>
<Route exact path="/" >
<Home />
</Route>
<Route path="/details" >
<Details />
</Route>
<Route path="*">
<Redirect to="/" />
</Route>
</Switch>
</BrowserRouter>
</div>
);
}
export default App;

导航:

import './Navbar.css'
import { NavLink , Link } from 'react-router-dom'
export default function Navbar() {

return (
<header >
<ul >
<li><Link to="/">Home</Link></li>
<li><Link to="/details">Details</Link></li>
<li><a href="https://www.google.com">Google</a></li>
</ul>
</header>
)
}

Answer 1

升级到React-router-dom: Version: 5.3.3, Version: 5.1有bug

1。卸载您拥有的任何版本npm uninstall -s react-router-dom@5.1npm uninstall -s react-router-dom

2。Install React-router-dom: Version: 5.3.3npm install -s react-router-dom@5.3.3

或者去这篇文章:点击我去post

Answer 2

尝试使用路由而不是switch.

<<ol>

进口strong>路线

import { BrowserRouter , Redirect, Route , Routes, Switch } from 'react-router-dom';

2. 改变开关*路线

<Routes>
<Route exact path="/" >
<Home />
</Route>
<Route path="/details" >
<Details />
</Route>
<Route path="*">
<Redirect to="/" />
</Route>
</Routes>

我希望这对你有帮助