React 路由器链接仅适用于刷新

Question

这是我的 App.js。我这里有所有路线的代码

import{BrowserRouter,Switch,Route}from 'react-router-dom'       
import Home from './HOME/Home';
function App() {
  return(
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home }/> 
        <Route path="/cpu" exact component={Info}/> 
      </Switch>
    </BrowserRouter>
  )
}
    
export default App;

Home.js 我有网页链接的地方

import{BrowserRouter}from 'react-router-dom'
import {Link} from 'react-router-dom'
   
function Navs(){
  return(
    ReactDOM.render(
      <div className="Navs">
        <ul>
            <BrowserRouter>
        <Link to="/cpu">CPU</Link>
        <Link to="/Monitors">MONITORS</Link>
        <Link to="/GPU">GPUS</Link>
        <Link to="/Ram">RAMS</Link>
        <Link to="/Keyboards">KEYBOARDS</Link>
        <Link to="/Mouse">MOUSE </Link> 
        <Link to="/Others">OTHER ACCESORIES</Link>
        </BrowserRouter>
        </ul>
      </div>
      ,document.getElementById('Navs')
    )
  )
}

尽管我的所有代码都正确，但我不明白为什么它不起作用。 我已经尝试了所有解决方案，例如将路由器更改为 BrowserRouter。 当我单击链接时，URL 会发生变化。 但是显示了相同的页面。 当我刷新页面时它工作正常。

Answer 1

问题

您正在使用多个Router 。 链接周围的嵌套路由器正在处理被单击的链接并更新地址栏中的 URL，但这不允许处理路由的外部路由器知道地址更改（直到您重新加载页面）。

解决方案

移除嵌套的Router ，整个应用只需要一个路由上下文。

<div className="Navs">
  <ul>
    <Link to="/cpu">CPU</Link>
    <Link to="/Monitors">MONITORS</Link>
    <Link to="/GPU">GPUS</Link>
    <Link to="/Ram">RAMS</Link>
    <Link to="/Keyboards">KEYBOARDS</Link>
    <Link to="/Mouse">MOUSE </Link> 
    <Link to="/Others">OTHER ACCESORIES</Link>
  </ul>
</div>

您也不应该将应用程序的不同部分渲染到不同的 ReactDOM 元素中（如果必须，请使用门户）。 您还需要删除Nav中无关的ReactDOM.render并将Nav渲染到可能在App中的常规 JSX 中正在渲染的路由器中。

function App() {
  return(
    <BrowserRouter>
      <Nav />
      <Switch>
        <Route path="/" exact component={Home }/> 
        <Route path="/cpu" exact component={Info}/> 
      </Switch>
    </BrowserRouter>
  );
}