如何在 React Router DOM 中使用 Regex 从路由匹配中排除参数？答案

【问题标题】：How to exclude param from route matches with Regex in React Router DOM?如何在 React Router DOM 中使用 Regex 从路由匹配中排除参数？
【发布时间】：2018-04-07 12:52:22
【问题描述】：

我的目标是拥有这样的路线

/confirm/resend : 显示重新发送表格

/confirm/31k41k2k12kl3lk : 检查令牌并重定向

/confirm : 显示表格

我的路由文件是这样的

<Route path="/auth/confirm/resend" component={component.Confirm} />
<Route exact path="/auth/confirm/:token(?!(resend))?" component={component.Confirm} />

问题是:token(?!(resend))?这部分不起作用。

我在这里尝试匹配 /as12k 和 /1231jj1，但不匹配 /resend。

【问题讨论】：

标签： regex reactjs react-router react-router-dom

【解决方案1】：

您可以使用Switch 来渲染它遇到的第一条路线

const Router = ReactRouterDOM.HashRouter;
const Route = ReactRouterDOM.Route;
const Link = ReactRouterDOM.Link;
const Switch = ReactRouterDOM.Switch;

const Confirm = ()=><div>Confirm</div>;

const Resend = ()=><div>Resend</div>

const Token = ()=><div>Token</div>

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Router>
        <div>
          <p>Main App</p>
          <Link to="/confirm">Confirm </Link>
          <Link to="/confirm/resend">Resend </Link>
          <Link to="/confirm/123">Token </Link>
          <Switch>
            <Route exact path="/confirm/resend" component={Resend} />
            <Route path="/confirm/:token" component={Token} />
            <Route path="/confirm" component={Confirm} />
          </Switch>
        </div>
      </Router>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.2.0/react-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.2.2/react-router-dom.js"></script>
<div id="root"></div>

https://reacttraining.com/react-router/core/api/Switch

【讨论】：

谢谢 :) 开关工作。我不能投票。我的代表是
@David 没关系。乐于助人