react-router-dom没有按预期工作[重复]答案

【问题标题】：react-router-dom not working as intended [duplicate]react-router-dom没有按预期工作[重复]
【发布时间】：2018-03-25 13:47:33
【问题描述】：

我想实现这个（V3）

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

使用 react-router-dom 的 react-router V4 但我无法做到这一点，当我尝试这个时

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

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

****编辑****
谢谢你们。我已经用 Switch 组件包装了路由，它工作正常，但是当我导航到 localhost:3000/jjj 或除 http://localhost:3000/ 之外的其他路由时，组件 App 仍然显示。

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

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

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

【讨论】：

谢谢。我已经用 Switch 组件包装了路由，它工作正常但是当我导航到localhost:3000/jjj 或除http://localhost:3000/ 之外的其他路由时，组件应用程序仍然显示。这不是应该是。
因为路径 "/" 包含在 '/jjj' 中，您需要为 Route 指定确切的属性。所以只有当“/”完全匹配时——你渲染组件。

【解决方案2】：

似乎“/”路由包含在“*”中。

尝试：

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

（编辑：在此处包含评论：）如果不能解决，请尝试使用 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 />

【讨论】：

如果不能解决，尝试使用 Switch 只渲染单个路由： } />
/>

谢谢。我已经用 Switch 组件包装了路由，它工作正常，但是当我导航到 localhost:3000/jjj 或 localhost:3000 之外的其他路由时，组件 App 仍然显示。不应该是。

您是否尝试过中的确切道具

@dpetrini 谢谢。它现在工作正常