重定向上的React嵌套路由问题

Question

好吧，基本上我是一个新的反应，并试图在一个反应应用程序中使用react-router-dom，基本上我想要的是我希望我的根路由""得到重定向到 "admin"，然后 "admin "到 "adminlogin "的网址被重定向从我写的代码，但我看到的页面没有找到组件，而不是。

我的应用程序组件

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>
  );
}

另外，我建议你用linter，不一定要写exact={true}，写exact就够了。

按照404页面的评论进行编辑。