具有相似路径（固定和动态路径参数）的 React Router v4 组件是 "overlapping"

Question

我的路线是这样设置的：

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

当我转到 chat/new 时，它也显示 {Chat}。有没有办法在我去/chat/new的时候专门调用NewChat？

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

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

具有相似路径（固定和动态路径参数）的 React Router v4 组件是 "overlapping"

React Router v4 components with similar paths (fixed and dynamic path param) are "overlapping"

reactjs

react-router

react-router-v4