React router v4 忽略 exact

Question

当路径不正确时，我尝试使用 React router v4 渲染 NotFound 组件或重定向到根路由，但是当我在“/”上时，我的应用程序渲染了 2 个组件。

<Switch>
     <Navbar>
         <Route exact path="/" component={App} />
         <Route path="/Other" component={Other} />
         <Route component={NotFound} />
     </Navbar>
</Switch>

我的导航栏看起来像：

render()
{
    return(
        <div>
            {/*Any content here*/}
            {this.props.children}
        </div>
    );
}

如果我将 <Route component={NotFound} /> 替换为 <Redirect to="/" />，它看起来可以正常工作，但出现错误：Warning: You tried to redirect to the same route you're currently on: "/"

感谢您的帮助！ :)

Answer 1

您的 Switch 组件的放置不正确，它应该包裹定义了 Routes 的子组件

<Navbar>
     <Switch>
         <Route exact path="/" component={App} />
         <Route path="/Other" component={Other} />
         <Route component={NotFound} />
     </Switch>
</Navbar>

React router v4 忽略 exact

React router v4 ignores exact

javascript

reactjs

react-router

react-router-v4