react-router-dom问题 已有路由path：A/:id1/?id2/?extra 需要新增A/B 怎么才能不影响id1 id2 extra？

Question

如题 求解
react-router-dom问题 已有路由path：A/:id1/?id2/?extra 需要新增A/B 怎么才能不影响id1 id2 extra？

Answer 1

可以使用 React Router 中的 Switch 和 exact 属性来实现。具体操作如下：

1. 在路由配置中，将 A/:id1/?id2/?extra 放在 A/B 的前面：

import { Switch, Route } from 'react-router-dom';

function App() {
  return (
    <Switch>
      <Route path="/A/B">
        <ComponentB />
      </Route>
      <Route exact path="/A/:id1?/:id2?/:extra?">
        <ComponentA />
      </Route>
    </Switch>
  );
}

Switch 组件会尝试匹配第一个满足条件的路由，将 A/:id1/?id2/?extra 放在前面可以保证优先匹配这个路由。

2. 在路由配置中，将 /:id1?/:id2?/:extra? 更改为 /:id1+?/:id2?/:extra?：

import { Switch, Route } from 'react-router-dom';

function App() {
  return (
    <Switch>
      <Route path="/A/B">
        <ComponentB />
      </Route>
      <Route exact path="/A/:id1+?/:id2?/:extra?">
        <ComponentA />
      </Route>
    </Switch>
  );
}

这里使用 + 替换了原来的 ? ，这表示 id1 参数至少要有一个字符，这样就不会与路由 A/B 冲突了。

通过以上的操作，就可以实现新增路由 A/B 并且不会影响已有路由 A/:id1/?id2/?extra 的参数。