react-router-dom 相关问题

在 React Router v6 中，如何使用而不是 useNavigate() 返回上一页。 // 而不是这个... 导航(-1)}> // ...它必须是... 在 React Router v6 中，如何使用 <Link> 而不是 useNavigate() 返回上一页。 // Instead of this... <button onClick={() => navigate(-1)}> // ...it needs to be this: const previousPage = ??? <Link to={previousPage}>Go back</Link> 将其更改为 <Link> 将允许我使用 <a href="xxxx"> 而不是 <button>，这是在页面之间创建链接的最方便的方式。（更多关于按钮与链接的信息）。例如，它允许用户右键单击并在新选项卡中打开页面。但我不知道要传递给链接什么 URL。更新：我创建了一个codesandbox来帮助您找到解决方案。更新 2：根据答案和一些研究，我创建了一个 GitHub 问题 react-router 更新3：我在下面添加了我自己对此问题的答案。这不是 react-router-dom@6 中的错误，也不是 Link 真正要做的任何事情，即它只是引擎盖下的锚标记，并作为声明性导航操作链接到路径。这与像 history.go(1) 或 history.back()（i.e. history.go(-1)）这样的命令式操作有根本的不同，在这些命令式操作中，您命令式地在历史堆栈中向前/向后导航。但是，在 react-router-dom@6 中，您可以相对于当前路径进行导航。 ".." 将为当前 Route 组件中渲染的任何 Routes 组件导航“返回”一个路径段。 IE。从 "/destiny" 回到 "/"，具有相同的 Routes 组件。示例： import { Link } from 'react-router-dom'; export default function Destiny() { return ( <div> <h1>Destiny Page</h1> <Link to={'..'}>Go back</Link> <br /> <Link to="/">Go Home ("/")</Link> </div> ); } 请注意，这个不是相当于 navigate(-1)，因为它没有通过历史堆栈进行转换，因此它不是真正的后退导航。如果您想进行真正的后退导航，那么您需要向 onClick 添加一个 Link 处理程序，并防止默认事件操作并处理发出命令式后退导航。示例： import { useNavigate, Link } from 'react-router-dom'; export default function Destiny() { const navigate = useNavigate(); return ( <div> <h1>Destiny Page</h1> <Link to={'..'} onClick={(e) => { e.preventDefault(); navigate(-1); }} > Go back (-1) </Link> <br /> <Link to="/">Go Home ("/")</Link> </div> ); } <Link to={-1}>Go Back</Link> 会起作用的。据我所知，不可能有一个完全可访问的“返回”链接： <Link to={-1}>Go back</Link> // or <button onClick={() => navigate(-1)}>Go back</button> 它无法完全访问有两个原因：当您直接从第一页（安装时）进入时，单击不起作用。右键单击（在新选项卡中打开）永远不起作用。对于1）我找到了解决方法： const router = useRouter(); // next/router function handleGoBack() { // 💡 Verify if previous page exists before using router.back const hasPreviousPage = window.history.length > 1; if (hasPreviousPage) { router.back(); } else { // fallback to a meaningful route. router.push("/"); } } <button onClick={handleGoBack}> Go back </button> 对于2）我没有找到任何解决方案。我的建议是尽可能避免使用 -1 进行“返回”链接，而使用 <Link> 以及可能指向上一页的真实 URL。如这个答案中关于另一个问题的描述，在React Router 6中通过可访问链接实现返回行为的方法是使用位置状态来存储您想要返回的路径值，然后读取它位于保存链接的组件中。 // COMPONENT 1 const { pathname } = useLocation(); const navigate = useNavigate(); // either of the following <Link to="/destination" state: { previous: pathname }> CLICK ME </Link> <Button onClick= {() => { navigate( `/destination`, { state: { previous: pathname } } ) } > CLICK ME </Button> // COMPONENT 2 const { state: { previous }} = useLocation(); <Link href={ previous }>GO BACK</Link> 尝试使用此方法转到上一页。 <Link to="..">Go Back</Link> 这可能有用... let url = '\\peviouspagename.js'; let element = <Link to={url}>Go Back</Link> 放置在函数之前的任何位置... 在函数中，您将看到类似： <div>{element}</div> 脚本通常所在的位置。元素是 <Link> 脚本。单独注明 URL，页面名称即可。您也可以通过将 <div id="hash"></div> 添加到末尾来对其进行哈希处理，如下所示：let url = '\\peviouspagename.js#hash'; 这样做应该会直接转到 <div> onClick。

reactjs react-router-dom

回答 6 投票 0

react-router-dom不显示主页以外的页面

我是 React 新手，所以我有一个用 React 构建的小应用程序，我想添加导航。但是，当我手动将本地主机重定向到其他页面（例如“http://localhost:5175/thanks”）时，我发现...

javascript reactjs react-router react-router-dom

回答 1 投票 0

链接 - React Router Dom 不调用后端

我正在使用 Link 创建一个 HashTag，如下图所示它适用于第一次点击，之后它只是更改浏览器 URL，不会向后端发出请求。我检查了浏览器的网络...

reactjs react-router-dom

回答 1 投票 0

useNavigate() 只能在 <Router> 组件的上下文中使用。（在不同的文件上）

我一直在做一个需要登录的项目。我一直在关注在搜索信息时发现的本教程（这是本教程的第一种方法）。然而，正如我想创造...