useNavation 移除 url 子路径而不是添加路由页面答案

【问题标题】：useNavation removes the url sub paths instead of adding the routing pageuseNavation 移除 url 子路径而不是添加路由页面
【发布时间】：2023-02-02 22:45:36
【问题描述】：

我有 asp.net mvc 应用程序，它在以下 url 下为 react 应用程序提供服务：http://domain.fake/controller/action。这是反应应用程序的路由：

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

当我尝试使用 useNavigate 钩子导航到值路由时：

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

在 url 中，而不是添加 /values 路径，路由删除整个 controller/action 路径，只设置 /values 路径。所以我得到的不是 url http://domain.fake/controller/action/values，而是 http://domain.fake/values，这是不对的。我能够正确显示组件并且我没有被服务器重定向但是 url 是错误的，因为我无法共享它，因为它不存在。

如何防止反应路由替换基本路径但将新路径添加到 url 并显示该路由的组件？

【问题讨论】：

你在开发模式下使用create-react-app吗？另外，这是您在部署应用程序后遇到的问题吗？
我在生产模式。是的，这是在部署应用程序之后发生的。

标签： javascript reactjs react-router

【解决方案1】：

react-router-dom 中的 true navigate 方法将清除子路径，因此我们需要手动添加它但如果你硬编码，这会很糟糕相反，我们会自动添加它

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

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

【讨论】：