Реагировать на проблему вложенной маршрутизации при перенаправлении

Question

Хорошо, так что в основном я новичок в реакции и пытался использовать response-router-dom в приложении для реагирования, в основном я хочу, чтобы мой root маршрут "/" был перенаправлен на "/ admin" а затем «/ admin» на «/ admin / login» URL-адрес перенаправляется из кода, который я написал, но вместо этого я вижу компонент, не найденный на странице.

My App component

function App() {
  return (
    // BrowserRouter
    <Router>
      <Switch>
        <Route exact={true} path="/">
          <Redirect to="/admin" />
        </Route>
        <Route exact={true} path="/admin" component={Admin} />
        <Route path="*" component={NotFound} />
      </Switch>
    </Router>
  );
}
}

Мой компонент администратора

export default function Admin(props: any) {
  useEffect(() => {
    console.log(props);
  });
  return (
    <div>
      <h1>Admin</h1>
      <Route path={`${props.match.path}`}>
        <Redirect to={`${props.match.path}/login`} exact={true} />
      </Route>

      <Route
        exact={true}
        path={`${props.match.path}/login`}
        component={Login}
      />
    </div>
  );
}

Мой компонент входа

export default function Login(props: any) {
  return (
    <div>
      <h1>Login</h1>
    </div>
  );
}

Answer 1

Удалить точный из пути администратора в компоненте APP.

function App() {
  return (
    // BrowserRouter
    <Router>
      <Switch>
        <Route exact path="/">
          <Redirect to="/admin" />
        </Route>
        <Route path="/admin" component={Admin} />
        <Route path="*" component={NotFound} />
      </Switch>
    </Router>
  );
}
}

Добавить точный в компонент администрирования

export default function Admin(props: any) {
  useEffect(() => {
    console.log(props);
  });
  return (
    <div>
      <h1>Admin</h1>         
      <Switch>
        <Route exact path={`${props.match.path}`}>
          <Redirect to={`${props.match.path}/login`} exact={true} />
        </Route>    
        <Route
          exact={true}
          path={`${props.match.path}/login`}
          component={Login}
        />
        <Redirect to='404-page-path' />
      </Switch>
    </div>
  );
}

Также , Я бы порекомендовал вам использовать линтер. Нет необходимости писать точное = {true}, достаточно написать только точное.

Отредактируйте согласно комментарию для страницы 404.