使用react router v5的条件url

Question

我正在尝试使用react-router v5添加一个'company/:companyId'基础路由到我的react应用程序。

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

我试着在以下几行中使用:

<BrowserRouter baseurl={companyId ? `/company/${comapnyId}` : ''} >

但是我在登录或路由器时得到了/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} />