reactjs ReactRouterDom删除url子路径，而不是添加路由页面

qoefvg9y 于 2023-02-03 发布在 React

关注(0)|答案(2)|浏览(168)

我有一个asp.netMVC应用程序，它在以下URL下为React应用程序提供服务：http://domain.fake/controller/action。下面是react应用的路由：

<Routes>
 <Route path="/*" element={<Config />}>
   <Route path="values" element={<ConfigKeyValues />} />
 </Route>
</Routes>

当我尝试使用useNavigate钩子导航到values路径时：

const nav = useNavigate();
nav("values");

在URL中，路由没有添加/values路径，而是删除了整个controller/action路径，只设置了/values路径，所以我没有得到url http://domain.fake/controller/action/values，而是得到了http://domain.fake/values，这是不正确的。
我可以正确显示组件，并且服务器没有重定向我，但是url是错误的，因为它不存在，所以我无法共享它。
我怎样才能防止React路由替换基本路径，而是向url添加新路径并显示该路由的组件？

reactjs

来源：https://stackoverflow.com/questions/75324241/react-router-dom-removes-the-url-sub-paths-instead-of-adding-the-routing-page

2条答案

按热度按时间

sigwle7e1#

要告诉React Router Dom您的应用程序是从子文件夹提供的，可以使用basename属性，该属性既适用于createBrowserRouter，也适用于BrowserRouter：
应用的basename，适用于无法部署到域根目录而只能部署到子目录的情况。

<BrowserRouter basename="/controller/action">
  {/* The rest of your app goes here */}
</BrowserRouter>

createBrowserRouter(routes, {
  basename: "/controller/action",
});

旁注，请注意，调用navigate("values")时，如果在"values"的开头不使用/，则会考虑您所处的路径，并按照doc的说法在此基础上进行构建。

赞(0）回复(0）举报 2023-02-03

7fyelxc52#

react-router-dom中的一个true navigate方法将清除子路径，因此我们需要手动添加它，但如果您硬编码它，这将是不好的，相反，我们将自动添加它

function YourPage() {
    const nav = useNavigate()
    const location = useLocation()
    return (
        <div>
            <button onClick={() => nav(`${location.pathname}/yourTargetPath`)}>
              Navigate
            </button>
        </div>
    )
}

我们将把子路径保存在变量中，并将其添加到navigate方法中，这应该可以解决您的问题

赞(0）回复(0）举报 2023-02-03

我来回答

reactjs ReactRouterDom删除url子路径，而不是添加路由页面

2条答案

相关问题

热门标签

最新问答