具有相似路径的React Router v4组件（固定和动态路径参数）是＆＃34;重叠＆＃34;

Question

我的路线设置如下：

<Route path="/chat/:id" component={Chat} />
<Route path="/chat/new" component={NewChat} />

当我转到chat/new时，它还显示{Chat}。当我转到NewChat时，有没有办法专门致电/chat/new？

Answer 1

您将使用Switch并重新排序您的路线，因为Switch会渲染第一个匹配的Route

<Switch>
   <Route path="/chat/new" component={NewChat} />
   <Route path="/chat/:id" component={Chat} />
</Switch>

Answer 2

<Route 
    path="/chat/:id/" 
    render={ props => { 

        if( props.location.pathname != '/chat/new') return <Chat {...props} /> 
        else return null;

    } } 
/>
<Route path="/chat/new" component={NewChat} />

取决于您的设置，这也可以是解决方案