javascript - 实现身份验证路由 - 使用嵌套的 /signin 和 /signup 路由

Question

我想signin/signup用 react-router-dom 实现简单的路由。

这是 App.js

<div className="App">
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route exact path="/auth" component={SignInSignUpPage} />
      </Switch>
    </div>

我正在使用这样的路由保护：

const HomePage = ({ currentUser }) => {
  return currentUser ? <HomePageComponent /> : <Redirect to="/auth" />;
};

现在我想要做的是拥有/auth路由，供用户登录，并且在两者的容器内signInSignUp，我有一个链接，它将更改路由auth/signup以查看注册页面，如下所示：

const SignInSignUpPage = ({ match }) => {
  return (
    <SignInSignUpContainer>
      <Route path={`${match.path}`} component={SignIn} />
      <Route path={`${match.path}/signup`} component={SignUp} />
    </SignInSignUpContainer>
  );
};

这反过来将呈现正确的组件：

const SignInSignUpContainer = ({ match, children, history }) => {
  const { isExact } = match;

  return (

      <SignInSignUpContainerContent>
        <SignInSignUpContainerContentForm>
          <LockIconContainer iconName="icon-lock-closed" />
          {children}
        </SignInSignUpContainerContentForm>
      </SignInSignUpContainerContent>
  );
};

我一定做错了，react-router-dom 文档正在解决受保护的路由，我发现它不适合这种情况。

标签： javascriptreactjsreact-router-dom

Answer 1

仅从结构来看：您不会将matchprop 向下发送到SignInSignUpContainer，并且似乎SignInSignUpContainer期望它。

应该 ：

  const SignInSignUpPage = ({ match }) => {
  return (
    <SignInSignUpContainer match={match}>
      <Route path={`${match.path}`} component={SignIn} />
      <Route path={`${match.path}/signup`} component={SignUp} />
    </SignInSignUpContainer>
  );
};

与history道具相同