React-router - как использовать несколько частных маршрутов?

Question

У моего проекта 2 разные роли, и обеим нужен вход.

Итак, я создал 2 страницы входа и 2 частных маршрута: Auth и Trainee

Проблема даже в том, что я печатаю URL-адрес не является дочерним для маршрута Auth, он будет от go до Auth, тогда все будет неправильно после этого

<BrowserRouter>
      <Switch>
        <Route
          exact
          path={LoginForAuthPath}
          component={LoginForAuthComponent}
        />
        <Route
          exact
          path={LoginForTraineePath}
          component={LoginForTraineeComponent}
        />
        <Auth>
          <Route
            exact
            path={SomeAuthPath}
            component={SomeAuthComponent}
          />
        </Auth>
        <Trainee>
          <Route
            exact
            path={SomeTraineePath}
            component={SomeTraineeComponent}
          />
        </Trainee>
      </Switch>
    </BrowserRouter>

class Auth extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loggedIn: isLoggedIn(),
    };
  }

  render() {
    return this.state.loggedIn ? (
      <Route children={this.props.children} />
    ) : (
      <Redirect to={LoginPath} />
    );
  }
}

Answer 1

Проблема здесь в том, что Switch визуализирует первый соответствующий компонент / Route в своих дочерних элементах.

Поскольку Auth визуализируется безоговорочно и является допустимым компонентом, он перестает соответствовать после визуализации Auth и никогда не достигает Trainee

Возможно, вам следует изменить свою реализацию Auth и Trainee, чтобы они оба использовали Route как прямой потомок

class Auth extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loggedIn: isLoggedIn(),
    };
  }

  render() {
    const {component: Component, ...rest } = this.props;
    return <Route {...rest} render={(rProps) => this.state.loggedIn? <Component {...rProps}/>: <Redirect to={LoginPath} />} /> 
  }
}

Аналогичным образом измените реализацию Trainee и используйте его как

<BrowserRouter>
  <Switch>
    <Route
      exact
      path={LoginForAuthPath}
      component={LoginForAuthComponent}
    />
    <Route
      exact
      path={LoginForTraineePath}
      component={LoginForTraineeComponent}
    />
    <Auth
        exact
        path={SomeAuthPath}
        component={SomeAuthComponent}
    />
    <Trainee
        exact
        path={SomeTraineePath}
        component={SomeTraineeComponent}
      />
  </Switch>
</BrowserRouter>