时间戳

首页 > 解决方案 > 在重定向时反应嵌套路由问题

reactjs - 在重定向时反应嵌套路由问题

问题描述

好的，所以基本上我是新来的反应，并试图在反应应用程序中使用 react-router-dom，基本上我想要的是我希望我的根路由“/”被重定向到“/admin”，然后“/admin” " 到 "/admin/login" 的 url 是从我编写的代码中重定向的，但我看到的是找不到页面组件。

我的应用组件

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

标签： reactjsreact-router-dom

解决方案

从 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 页面的评论进行编辑。

推荐阅读