react-router-v4 相关问题

antd选项卡使用react-router

想知道是否有一种方法可以根据每个选项卡的嵌套路由来渲染路由。 例如，当我们浏览到 http://localhost:3000/base/a http://localhost:3000/base/b 我们期望...

React-Router 4 捕获所有路由

我的React路由定义如下： ... 我的React路由定义如下： ... <Route component={Header} /> <Route exact path="/" component={Landing} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> <Route component={Footer} /> ... 我想定义一个捕获所有路由，捕获与“登陆”、“关于”或“联系”路由不匹配的任何内容，并重定向到 404 未找到页面。我怎样才能用 React Router 4 做到这一点？ 尝试这个实现 const AppRouter = (props) => { return ( <BrowserRouter> <div> <Header /> <Switch> <Route exact path="/" component={Landing} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> <Route component={NotFoundPage} /> </Switch> <Footer /> </div> </BrowserRouter> ); } 不确定这是否对你有用，因为我正在使用一些第 3 方 babel 包装器，但我可以声明我的所有路线，然后最后放置 <Route path="/*" render={() => <SomeComponent /* possible prop injection */ />}/> 我经常使用这个，但你也可以使用 <Route render={() => <SomeComponent />} /> 我不太使用这个，因为我更喜欢在代码中使用更多地标，但我从 https://tylermcginnis.com/react-router-handling-404-pages/ React 有一个名为 switch from 'react-router-dom' 的组件 因此，通过将路由包装在 Switch 内，React Router 将仅渲染第一个匹配的路由。这意味着所有其他不匹配的路由将通过指定没有属性的路由来捕获。请参阅https://ui.dev/react-router-v4-handling-404-pages/ 这是一个重定向所有其他路线的单行（放置在所有其他路线之后）： <Route path="/*" loader={() => redirect('/')} /> 试试这个： <Route path="/*" render={() => ( < SomeComponent /> /* possible prop injection */ )} /> 在这里，我捕获所有不存在的路由并将它们推送到 404 组件： <Route path="/*" render={() => ( <PagesError404 /> )} /> 记住 path = '/youreRoute' 但也 = {['/']} 归因于 exact = 完全匹配

this.props.history.push() 似乎不再在 React Router v4 中工作，有什么替代方案吗？

我是 React 新手，我看到的大多数有关使用 React Router 进行重定向的教程似乎都在使用上述代码片段。我想要实现的是将用户重定向到主页...

从 URL 中删除“%20” - React-Router

我正在使用react，我遇到了一个问题，尽管是一个美观问题而不是功能问题。 我正在从名称 API 生成反应路由。该路线运行良好，但由于名称有 sp...

React Router -- 区分listen()中的goBack()和goForward()

问题 在 React Router v4 中，如何使用listen()方法区分goBack()和goForward()调用？ 据我所知，位置和操作参数没有提供足够的信息......

错误：useNavigate()只能在<Router>组件的上下文中使用

我收到此错误 未捕获错误：useNavigate() 只能在 组件的上下文中使用。 不变 (bundle.js:36570:20) 在 useNavigate (bundle.js:36914:35) ...

如何在获取 api 时延迟 React 路由

我有多个路线，默认情况下应用程序在“/login”端点中打开，该端点呈现 当我输入用户名和密码时，中的代码 验证凭证...

React 路由器版本 4 中未发生路由

这次我可能犯了愚蠢的错误，但我只是明白了。我从 React router v4 开始，但我的路由没有发生。我尝试手动点击网址以及通过按钮点击没有结果....

带有查询参数的react-routergeneratePath

我正在使用react-router的内置函数generatePath来生成URL。问题是，据我了解，这个函数只是返回路径，并没有提供让我们知道的机制

使用react router V6子组件未渲染

我有一个以下组件，我正在尝试使用 React 路由器。 常量路由列表 = [ { 小路： ”/”， 元素：withSuspenseWrapper（SharedView）， 错误元素：

如何使用react-router-dom获取当前URL的来源？

我在带有服务器端渲染的react应用程序中使用react-router-dom，并且我正在寻找一种方法来获取类似于document.location.origin的东西，但是除了

无法在react-router 4中使用ref对Link组件进行.focus()

我正在使用react-router (v4) 中的Link 组件。我可以将引用附加到该组件并控制台记录该引用。 但是，如果我调用 linkRef.current.focus() 我会收到错误： 链接参考。

如何在ReactJS中通过链接传递多个状态

我想为我的下一页传递多个状态，这是我从另一个页面重定向的状态。 其中一个我已经通过了，而且运行良好。 我想为我的下一页传递多个状态，该状态是我从另一个页面重定向的。 我已经通过了一个，并且运行良好。 <Link to ={{pathname: "/CreateEventUser", state: { bucket_id: !this.state.selected_bucket.id ? this.state.recent_bucket : this.state.selected_bucket } }} > <button type="button" className="btn btn-danger">Create an Event</button> </Link> 现在我必须通过两个状态。其语法是什么？ <Link to ={{pathname: "/EventDetailsUser", state: { bucket_id: !this.state.selected_bucket.id ? this.state.recent_bucket : this.state.selected_bucket, eventId: event.id}}} > 位置路径名中的 state 参数接受一个对象，因此您可以通过将它们作为对象传递来传递任意数量的值，如下所示： <Link to ={{ pathname: "/CreateEventUser", state: { bucket_id: !this.state.selected_bucket.id ? this.state.recent_bucket : this.state.selected_bucket, new_id: this.state.newID, anotherValue: this.state.anotherValue } }} > <button type="button" className="btn btn-danger">Create an Event</button> </Link> 方式 1：这是通过链接状态发送多个状态的方法： 发送： <Link to={{ pathname: "/app/style/form", state: { item: item, styleList: styleList }, }} > Go Button </Link> 您将如何接收数据 收到： let stateData = props.location.state var styleUpdate = stateData["item"] var styleList = stateData['styleList'] 方式2： 您还可以更改要保存状态的变量的名称。（自定义状态名称） 发送： <Link to={{ pathname: "/app/style/form", styleList: styleList }}> Go Next </Link> 接收： let styleList = props.location.styleList 根据更新的react-router-dom <Link to={{ pathname: DESIRED_PATH, }} state={{ yourData: yourData}} style={{ textDecoration: 'none' }} > <Button > Navigate </Button> </Link>

React Router - 如何动态替换字符串中的参数

我在 URL 中有一组动态参数，例如用户区域设置，如下所示： /en/主页 在我的路由器配置 JSON 文件中，我有类似的内容： /:区域设置/主页 这是哪个...

React useEffect 不会在路线更改时触发

我希望每次路由更改（从 Component1 切换到 Component2）时 console.log('Refresh') 都会运行。但它仅在第一次渲染时触发。为什么？ 索引.js： 从“反应”导入反应；

如何在应用程序级别设置react-router的基本url？

我有一个使用 create-react-app 创建的应用程序，我想将其安装在我网站上的子目录中。推荐的方法是添加 process.env.PUBLIC_URL 作为 baseurl。 IE： 我有一个使用 create-react-app 创建的应用程序，我想将其安装在我网站上的子目录中。推荐的方法是添加 process.env.PUBLIC_URL 作为 baseurl。即： <Route exact path={`${process.env.PUBLIC_URL}/signin`} component={SigninPage}/> 现在有没有一种方法可以在应用程序级别设置它，这样我就不必在每个路由或链接或导航链接上重复这段代码？ 谢谢！ 您可以将其设置为basename上的Router，以下是React路由器文档的链接：basename中的BrowserRouter和basename中的HashRouter。它看起来像这样： <Router basename={process.env.PUBLIC_URL}> </Router> 使用 React Router v6，建议对 Web 项目使用 createBrowserRouter。 将选项对象作为第二个参数传递给 createBrowserRouter 以配置 basename。 import * as ReactDOM from 'react-dom'; import { RouterProvider, createBrowserRouter } from 'react-router-dom'; const router = createBrowserRouter([ /* routes... */ ], { basename: process.env.PUBLIC_URL }); ReactDOM.createRoot(document.getElementById('root')).render( <RouterProvider router={router} /> );

将状态传递给 history.push 时，React 路由器无法按预期工作

我有一些表格可以获取用户预订详细信息，然后在提交时通过 history.push('/somepath') 将用户重定向到其他页面，但是当我通过 history.push({ pathname: '', state :{} })...

react-router-hash-link 如果来自不同的路由则不起作用

我正在使用 react-router-hash-link 转到同一路线中的不同部分： 从“react-router-hash-link”导入{HashLink as Link}； 在渲染中： 使成为（） { 我正在使用react-router-hash-link去同一条路线的不同路段： import { HashLink as Link } from "react-router-hash-link"; 在渲染中： render() { <Link smooth to="#header2"> Scroll to header 2 section </Link> <h2 id="header2"></h2> } 这行得通。但是，如果我来自不同的路线并使用哈希链接到另一条路线，它不会滚动到该部分。 例如现在我在/routeone render() { <Link smooth to="/routetwo#header2"> Go to Route Two, header 2 section </Link> } 在这个例子中，我也在HashLink中导入了/routeone。 有什么遗漏吗？ 所以按照上面答案中必须保留 <a id="header2"> 的思路，我将相同的内容添加到 <span> 中，这也有效。然后我意识到，就我而言，我正在将 id 添加到我的自定义组件中，该组件没有传递 id 道具。一旦我向我的组件添加了一个 id 道具，HashLink 就开始正常工作了。 而不是<h2 id="header2"></h2> 如果你保持 <a id="header2"></a> 它有效。

在不重载页面的情况下使用react-router删除一个查询字符串？

在我的应用程序中，我有一个查询字符串，我想在点击按钮后删除。我得到的查询字符串是这样的： import qs from 'query-string' / ... const { search }。= url const { id ...

登录组件在认证为真后没有渲染，这与react-router文档中的代码类似。

我刚刚尝试在浏览器上建立react-router docs ex，但是在AuthButton组件中出现了问题，当isAuthenticated变成true时，它没有显示signOut按钮 import React from 'react'; ...