React 路由器 v4 忽略了确切的

Question

当路径不正确时，我正在尝试使用 React 路由器 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>