react router中参数路由和子路由冲突问题解决

我们有时候的路由需要传递一个参数例如：a/b/:id如果路由是a/b/123那么就可以直接匹配了，但b后面如果是这样的子路由该怎么匹配呢：a/b/sub。这时候是应该匹配的是参数路由还是子路由呢。

解决方法：将通配路由放到最后面就可以了，即a/b:id放在最后进行匹配。

这是我们的跳转链接：

      <Link to="/a" >组件A</Link>
      <br/>
      <Link to="/b" >组件B</Link>
      <br/>
      <Link to="/a/123123">带参数的组件A</Link>
      <br />
      <Link to="/a/sub">和带参数组建A对比的sub组件</Link>
      <br />

这是关于上面匹配的路由：

ReactDOM.render(
  <Router>
    <Wraper>
      <Route path="/a" component={A} />
      <Route path="/b" component={B} />
    </Wraper>
  </Router>,
  document.getElementById('root'));

子路由如果参数路由在子路由下面：

<Route exact path={`${path}`} render={(route)=>{ //这里一定要加exact关键字，否则所有都会到这里就不再继续匹配了
    return (<div>当前组件是不带参数的A</div>)
  }} />
  <Route path={`${path}/:id`} render={(route)=>{
    return (<div>当前组件是带参数的A，参数id：{route.match.params.id}</div>)
  }} />
  <Route path={`${path}/sub`} render={()=>{
    return (<div>这是sub组件</div>)
  }} />

如上，那么点击参数路由时，能够正确显示参数路由对应的组件

 但是当我点击sub组件时，如图：

 他把本来是a的子路由的sub也当作了参数，从而匹配了参数路由。

当我们将参数路由放到最后匹配位置：

<Switch>
  <Route exact path={`${path}`} render={(route)=>{ //这里一定要加exact关键字，否则所有都会到这里就不再继续匹配了
    return (<div>当前组件是不带参数的A</div>)
  }} />
  <Route path={`${path}/sub`} render={()=>{
    return (<div>这是sub组件</div>)
  }} />
  <Route path={`${path}/:id`} render={(route)=>{
    return (<div>当前组件是带参数的A，参数id：{route.match.params.id}</div>)
  }} />
</Switch>

 点击参数路由正确显示：

点击sub子路由时也能正确显示：

 

最后附上该文件示例所有需要的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router,Route,Link,Switch,useRouteMatch} from 'react-router-dom';


const A = (props)=>{
  let {path} = useRouteMatch();
  return (
    <div>
      <Switch>
        <Route exact path={`${path}`} render={(route)=>{ //这里一定要加exact关键字，否则所有都会到这里就不再继续匹配了
          return (<div>当前组件是不带参数的A</div>)
        }} />
        <Route path={`${path}/sub`} render={()=>{
          return (<div>这是sub组件</div>)
        }} />
        <Route path={`${path}/:id`} render={(route)=>{
          return (<div>当前组件是带参数的A，参数id：{route.match.params.id}</div>)
        }} />
      </Switch>
    </div>
  )
}

const B = ()=>{
  return (
    <div>这是组件 B</div>
  )
}

const Wraper =(props)=>{
  return (
    <div>
      <Link to="/a" >组件A</Link>
      <br/>
      <Link to="/b" >组件B</Link>
      <br/>
      <Link to="/a/123123">带参数的组件A</Link>
      <br />
      <Link to="/a/sub">和带参数组建A对比的sub组件</Link>
      <br />
      {props.children}
    </div>
  )
}



ReactDOM.render(
  <Router>
    <Wraper>
      <Route path="/a" component={A} />
      <Route path="/b" component={B} />
    </Wraper>
  </Router>,
  document.getElementById('root'));