Question

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

/ 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，但不是/重新发送。

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中的Regex路由匹配中排除param？

1 个答案: