Question

我想实现这个目标（V3）

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

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

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

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

**** **** EDIT
谢谢各位。我已经使用Switch组件包装了路由，并且工作正常但是当我导航到localhost:3000/jjj或除了http://localhost:3000/之外的其他路由时，组件App仍会显示。

Answer 1

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

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

Answer 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 />

react-router-dom没有按预期工作

2 个答案: