react-router 相关问题

React Router - 一个完整的React路由库，灵感来自Ember的路由系统

我的应用程序组件中有这两条路由：：} /> 我的 App 组件中有这两条路线： <Route path="create" element={user ? <Create /> : <Navigate to="/login" />} /> <Route path="dashboard" element={user ? <Dashboard /> : <Navigate to="/login" />} /> 如果用户未登录，他们将无法访问这两条路线，应该被定向到 login 页面，这样就可以了。然而，当用户登录时，我可以转到/dashboard，这很好，但是如果我转到/create，React会重定向到/dashboard。这让我很头疼，为什么呢？我缺少什么？谢谢大家当我在地址栏中手动输入网址或刷新 /create 页面时，会发生这种情况。即使我已登录，我也会被重定向到/dashboard。谢谢您可能在路由配置中使用相对路径，这在直接导航到 URL 时可能会导致问题。相反，请使用以正斜杠 / 开头的绝对路径。 <Route path="/create" element={user ? <Create /> : <Navigate to="/login" />} /> <Route path="/dashboard" element={user ? <Dashboard /> : <Navigate to="/login" />} />

reactjs react-router

回答 1 投票 0

如何在 React Router DOM v6 上使用 ScrollRestoration

我已经创建了我的路由器，如 RRDv6 文档中推荐的那样：导出常量路由器 = createBrowserRouter([ { 小路： '/'，元素: , 孩子们： [ ...

javascript reactjs react-router react-router-dom

回答 1 投票 0

如何正确编写navlink？

导航链接在浏览器中不起作用，它显示：未捕获类型错误：无法解构“React.useContext（...）”的属性“未来”，因为它为空。我在其他项目中使用过 NavLink，但它也不起作用...

javascript reactjs react-router

回答 2 投票 0

受保护的路由在 API 响应到达之前重定向

如果订阅结束，我正在使用受保护的路由将用户重定向到订阅页面。但 Route 并不等待 api 响应到达。 const ProtectedRoute = ({ 组件: Comp...

reactjs redux routes react-redux react-router

回答 1 投票 0

如何在页面重新加载时清除react-router中的location.state？

我目前正在通过路线更改的状态，如下所示：我目前正在通过路线更改来传递我的状态，如下所示： <Link to={{ pathname:`/transactions/${props.transaction.id}`, state: {transaction: props.transaction} }}> View Details </Link> 我的逻辑是，如果“location.state.transaction”存在，则不获取新数据，否则获取数据。现在的缺陷是页面重新加载时。如果用户重新加载页面，应用程序需要获取新数据。我认为如果重新加载，“location.state”会被清除，但显然状态保存在 sessionStorage 中。我该如何解决这个问题？我可以每次都获取新数据，但单击“查看详细信息”链接时不应获取数据。如果您使用的是 React hooks，则可以直接使用 window.history 来清除状态而不触发重新渲染。这比使用 useHistory 钩子的 replace 方法要好，后者会导致组件重新渲染。 window.history.replaceState({}, '') 我也遇到了这个问题，我最终所做的是从 React Router 检索浏览器历史记录并清除特定的 location.state 属性。所以在你的情况下，它会是transaction。我在 componentDidMount 中执行了此操作，以便在您第一次访问该页面后，该属性不应再存在， import createHistory from 'history/createBrowserHistory' ... componentDidMount(){ const history = createHistory(); if (history.location.state && history.location.state.transaction) { let state = { ...history.location.state }; delete state.transaction; history.replace({ ...history.location, state }); } } 有更好的方法，无需使用 3 方库。我们可以使用history.replace() https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md componentDidMount(){ const {location,history} = this.props; //use the state via location.state //and replace the state via history.replace() } 在 React Router V6 中，您可以使用 useNavigate() 清除当前路径的状态： import React, { useEffect } from "react"; import { useLocation, useNavigate } from "react-router-dom"; useEffect(() => { const location = useLocation(); const navigate = useNavigate(); navigate(location.pathname, {}); // reload and pass empty object to clear state // we can also use replace option: ..., {replace: true} }, []); 使用状态后，再次调度一个空状态的操作来清理状态。 this.props.dispatch(replace({ ...this.props.location, state: undefined }); history.replace({ state: {} })。如果您还想将用户重定向到某个地方，请使用 history.replace({ pathname: '/profile/me', state: {} }) 在 React Router v6 中，您可以执行以下操作： const location = useLocation(); const navigate = useNavigate(); const state = location.state; // Do some stuff with the state // ... // Clear the state after navigate(location.pathname, { replace: true }); 导航到当前页面除了清除状态（修改历史记录）之外不会产生任何可见效果。这可能有效。 const history = useHistory(); // consume the history.location.state and reset the state useEffect(() => { history.replace(`/transactions/${history.location.state.transaction.id}`, {}); }, []); 我建议不要在这里使用 location 属性，而是创建一个带有路径 /transactions/:transactionId 的路线（无论你在哪里定义它们），并在目标内部的 transactionId 属性中捕获 props.match.params.transactionId成分。然后在 componentDidMount 中，您可以调度 API 请求操作以获取交易。不要忘记从链接的 props 中删除 state 参数。这些都不会使用 useNavigate 重置我的状态。我要做的就是在导航上设置 useEffect。 ... const navigate = useNavigate() ... useEffect(() => { // set state here .... },[navigate]

javascript reactjs react-router

回答 10 投票 0

反应导出服务中 useNavigate 上的无效挂钩调用

我将以下代码导出为 CommonService.tsx 并调用为 COMMON.redirect('/'); 从“react-router-dom”导入{useNavigate}；导出函数重定向（路由：字符串）{ c...

reactjs react-hooks react-router

回答 1 投票 0

useNavigate 不会替换我的动态参数

在我们的项目中，我们使用的是react-router版本4，我们已经迁移到版本6。然而，自从 useLocation API 更改为

javascript reactjs react-router react-router-dom

回答 2 投票 0

React 中的路由，在页面之间导航

我是 React 新手，我不明白如何在页面之间导航/路由。我开发了一个电子商务网站，在第一页我有图像，我想为每个图像单击打开一个新的不同页面...