Question

我正在尝试使用 react-router v5 向我的 React 应用程序添加“company/:companyId”基本路由。

我不希望我的 /login /register 路由使用这个基本 url，我只想强制登录用户使用基本 url 进行导航。

我试过在以下几行中使用一些东西：

但是我在登录时得到了 /company/undefined 或者路由器完全忽略基本 url 都是尝试。

Answer 1

在这里，您可以创建条件以包含公司 ID 或其他一些因素，例如 isLogged in。我已经通过检查用户是否使用移动设备来完成此操作。如果它们符合我的条件，会将它们返回到移动登录页面。

const PrivateRoute = ({ component: Component, condition }) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        condition? <Component {...props} /> : <Redirect to={condition ? '/condition-page' : '/somewhere-else'} />
      }
    />
  );
};

import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";

    <Router history={history}>
    <PrivateRoute exact path="/" condition={true} component={Page1} />
    <Route exact path="/page2" component={Page2} />
    <Route exact path="/page3" component={Page3} />
  </Router>

如果你想嵌套路由，你可以在路由本身内完成。

    <Router history={history}>
    <Route exact path="/companies" component={Companies} />
  </Router>

// inside companies component you nest a route
    <Route exact path="/companies/:id" component={Company} />

带有反应路由器 v5 的可选 url

1 个答案: