如何在 React Router DOM 中使用正则表达式从路由匹配中排除参数？

Question

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

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

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

/确认：显示表格

我的路由文件是这样的

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

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

我试图在此处匹配 /as12k 和 /1231jj1，但不匹配 /resend。

Answer 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

如何在 React Router DOM 中使用正则表达式从路由匹配中排除参数？

How to exclude param from route matches with Regex in React Router DOM?

regex

reactjs

react-router

react-router-dom