路由到另一个页面不发生没有刷新后点击React中的链接

Question

我在React中有一个导航栏，代码如下

import './App.css';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import Header from './components/header/Header';
import Home from './components/home/Home';
import About from './components/about/About';
import Accessories from './components/accessories/Accessories';
import Category1 from './components/accessories/categories/Category1';
import Category2 from './components/accessories/categories/Category2';
import Category3 from './components/accessories/categories/Category3';
import Category4 from './components/accessories/categories/Category4';
import Contact from './components/contact/Contact';
import Footer from './components/footer/Footer';
const App = () => {
return (
<div className="App">
<Header />
<Router>
<Switch>
<Route exact path="/">
<Home />
<About />
<Accessories />
<Contact />
</Route>
<Route exact path="/category1">
<Category1 />
</Route>
<Route exact path="/category2">
<Category2 />
</Route>
<Route exact path="/category3">
<Category3 />
</Route>
<Route exact path="/category4">
<Category4 />
</Route>
</Switch>
</Router>
<Footer />
</div>
);
}
export default App;

我可以顺利地从/到/category1，但是当我从/category1重路由到/时，在刷新页面之前不会发生重新渲染。我不知道现在该怎么办。事先感谢您的帮助

:我只是改变我所有的Links锚标签，现在他们正在工作，但这是一个很好的做法吗?

Answer 1

<Route exact path="/">
<Home />
<About />
<Accessories />
<Contact />
</Route>

把上面的代码放在所有被定义的路由之后，它应该可以工作

<Switch>
<Route exact path="/category1">
<Category1 />
</Route>
<Route exact path="/category2">
<Category2 />
</Route>
<Route exact path="/category3">
<Category3 />
</Route>
<Route exact path="/category4">
<Category4 />
</Route>
<Route exact path="/">
<Home />
<About />
<Accessories />
<Contact />
</Route>
</Switch>

'/'路径应该在所有路径定义后最后定义

Answer 2

你必须使用元素来重定向到其他路由。在"/category1"中，可以使用元素重定向"/"无需重新加载页面