React Router Dom 相对路径

Question

我在与此类似的域中发布了一个应用程序 "www.domain.com/app/client/store"

当我一开始开发它时，并没有想到域是那样的，而是像 "www.domain.com" 问题是它导致路由器出现问题

当你访问初始路由时"www.domain.com/app/client/store"它没有找到登录的路径并跳转到管理

我需要不管 url 总是找到 "/"

的初始路径

我的路由器目前是这样的

const Routes = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Login} />
        <Route exact path="/main" component={Main} />
        <Route exact path="/main/:id" component={Main} />
        <Route exact="/management" component={Management} />
      </Switch>
    </Router>
  );
};

域是相对的，因此将绝对 URL 放在路径中不是一个好主意

如何使路由相对且不影响应用程序的初始页面？

路线大概是这样的

"www.domain.com/app/client1/store5" "www.domain.com/app/client5/store1" "www.domain.com/app/client2/store3"

提前感谢您的帮助和反馈

Answer 1

为了正确路由，您的路径需要 public URL 附加到每条路由。

const baseURL = process.env.PUBLIC_URL;

const Routes = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="${baseURL}/" component={Login} />
        <Route exact path="${baseURL}/main" component={Main} />
        <Route exact path="${baseURL}/main/:id" component={Main} />
        <Route exact="${baseURL}/management" component={Management} />
      </Switch>
    </Router>
  );
};

类似的东西应该有用。您还可以使用一些软件包来让生活更轻松，它们会自动附加此内容，但这是一种非常简单的方法。

React Router Dom 相对路径

React Router Dom Relative Path

javascript

reactjs

react-router-dom

relative-path