首页 文章

react-router-dom无法正常工作[重复]

提问于
浏览 次
2

这个问题在这里已有答案：

我想实现这个（V3）

<Router>
    <Route path="/" component={App}/>
    <Route path="*" component={Whoops404}/>
</Router>

使用react-router-dom的反应路由器的V4但我无法做到这一点，当我尝试这个

<BrowserRouter>
    <div>
        <Route path="/" component={App}/>
        <Route path="*" component={Whoops404}/>
    </div>
</BrowserRouter>

它会渲染块中的所有路径 . 我做错了吗？

编辑
谢谢各位 . 我已经使用Switch组件包装了路由，并且工作正常但是当我导航到 localhost:3000/jjj 或其他路由时， http://localhost:3000/ 组件仍然显示 .

reactjs react-router

2 回答

  • 2

    似乎“/”路线包含在“*”中 .

    尝试：

    要渲染/而不是下面的其他内容，以防您尝试仅渲染“/”并获得此副作用 .

    （编辑：在这里包含commment :)如果没有解决，尝试使用Switch只渲染单个路由：

    <BrowserRouter>
 <Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" render={ () => <About title='About' /> } />
  <Route path="/costumers" component={Costumers} /> 
  <Route component={NotFound} /> 
 </Switch>  
</BrowserRouter />
    回复于
  • 3

    您需要使用Switch组件包装路由 . 所以它可以匹配其中一条路线 . 你也可以省略'path =“*” .

    <Switch>
  <Route exact path="/" component={App}/>
  <Route component={Whoops404}/>
</Switch>
    回复于

相关问题