Javascript React路由器链接仅在刷新时有效

这是我的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;

从'react router dom'导入{BrowserRouter，Switch，Route}
从“./Home/Home”导入主页；
函数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')
    )
  )
}

从'react router dom'导入{BrowserRouter}
从“react router dom”导入{Link}
函数Navs（）{
返回(
ReactDOM.render(

中央处理器
监视器
GPU
公羊
键盘
老鼠
其他附件

，document.getElementById（'Navs'））
)
)
}

虽然我所有的代码都正确，但我不明白为什么它不工作。我尝试过所有的解决方案，比如把路由器换成浏览器路由器。当我点击链接时，URL会改变。但显示的是同一页。当我刷新页面时，它工作正常。

Issue 您正在使用多个

路由器

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

解决方案 删除嵌套的

路由器

，整个应用程序只需要一个路由上下文

<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.render吗？您只能使用一个，导航必须是BrowserRouter的子项。从导航中删除BrowserRouter会出现一个错误：“不能使用路由器外的链接”@mojo需要在

App

中呈现的

BrowserRouter

中呈现的

Nav

，该路由器呈现的React子树中的某个位置。感谢您的帮助，但我仍然不明白哪里出了问题。更改后的代码在fiddle“”中看起来像这样。@mojo表明JSFIDLE似乎没有运行。你认为你可以把它修好让它运行，或者创建一个可以运行的版本吗？让它工作起来，我是新的反应感谢你帮助我

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