使用react-router-dom实现登录和注册路由

Question

我正在尝试使用react-router-dom实施登录和注册路由，但我不确定我想出的是实现此目标的最佳方法，特别是如果我想将来实现重定向。

//App.js

const App = () => {
  return (
    <div className="App">
      <Switch>
        <Route path="/" component={SignInSignUpPage}></Route>
      </Switch>
    </div>
  );
};

// SignInSignUpPage
const SignInSignUpPage = () => {
  return (
    <SignInSignUpContainer />
  );
};

//SignInSignUpContainer
const SignInSignUpContainer = () => {
  return (
    <SignInSignUpContainerStyles>

      <SignInSignUpContaineHeader>
        <SignInSignUpContaineHeaderElement to="/">
          Sign in
        </SignInSignUpContaineHeaderElement>
        <SignInSignUpContaineHeaderElement to="/signup">
          Sign Up
        </SignInSignUpContaineHeaderElement>
      </SignInSignUpContaineHeader>

      <SignInSignUpContainerContent>
        <SignInSignUpContainerContentForm>
          <LockIconContainer iconName="icon-lock-closed" />

          <Switch>
            <Route exact path="/" component={SignIn} />

            <Route path="/signup" component={SignUp} />
          </Switch>

        </SignInSignUpContainerContentForm>
      </SignInSignUpContainerContent>
    </SignInSignUpContainerStyles>

如您所见，我在SignInSignUpContainer组件内部有链接，这些链接将路由到不同的组件，但实际上是在路由到完全相同的组件并基于条件路由进行渲染。

这很容易理解，我如何才能更好地实现这些路由，因此将来在会话/用户凭据的基础上实现重定向会更加容易？