react-router-v4 相关问题

如何在React Router v4中通过单击按钮来导航路径？

我在react-router-dom中有这个路径： {/* 应用 = 主页 */} 我在react-router-dom中有这个路径： <BrowserRouter> <div> <Route exact path='/(index.html)?' component={Home}/> {/* app = home */} <Route path='/register' component={Registration}/> </div> </BrowserRouter> 一切工作正常，现在我想在组件中的任何位置通过 onClick 更改路径，代码如下： <button onClick={() => history.push('/the/path') }> change path </button> 我该怎么做？ import {withRouter} from 'react-router-dom'; ... class App extends React.Component { ... nextPath(path) { this.props.history.push(path); } render() { return ( <button onClick={() => this.nextPath('/the/path') }> change path </button> ); } } export default withRouter(App); 如果您仅使用该按钮进行导航，则可以将其替换为 <Link />1 并应用按钮样式。 <Link to='/new/location/'>Click Me</Link> 或者您可以使用 <NavLink />2。 如果使用Material UI，您可以使用以下代码： import { Link } from 'react-router-dom' import Button from '@material-ui/core/Button'; <Button component={Link} to="/new/location/"> Click Me </Button> (1): import {Link} from "react-router-dom"; (2): import {NavLink} from "react-router-dom"; react-router-dom 导出一个名为 useHistory 的钩子。 只需导入它并在您的组件中使用它，如下所示： import React from 'react'; import { useHistory } from 'react-router-dom'; export default () => { const history = useHistory(); return ( <button onClick={() => history.push('/your/path')}> Click me </button> ); }; 我正在使用： “反应”：“^16.13.1” “react-router-dom”：“^5.2.0” 查看这篇文章了解更多详细信息：https://ultimatecourses.com/blog/programmatically-navigate-react-router 在 react-router-dom 版本 6 使用 useNavigate import { useNavigate } from "react-router-dom"; import { Button } from "@mui/material"; ... const navigate = useNavigate(); <Button onClick={() => navigate("/your-path-here")}> click me </Button> 不要忘记从 mui.com 安装以使用 <Button></Button> 组件 在react-router-dom版本6中，您也可以使用Link组件。这是为了支持@Abey Bruck 的回答 import { Button } from "@chakra-ui/react"; ... const Home = () => { return ( <Button as={Link} to={'/login'}>Login Page</Button> ) } import { Button } from "@mui/material"; const navigate = useNavigate(); const submitHandler = (e) => { e.preventDefault(); navigate(`/`); }; <Button variant="contained" onClick={submitHandler}>Home Page</Button> 您可以使用 window.location 来实现此目的 const LoginClick = () => { window.location.href = '/登录'; // 直接设置URL即可跳转到登录页面 }; 登录 像这样

在哪里可以找到react-router-dom位置、历史和匹配的类型？

当我使用react-router-dom v4.3.2中的withRouter时，它将三个属性传递给组件：历史记录、匹配和位置。在哪里可以找到这三个 TypeScript 对象的类型定义？...

React router.push 和 router.replace 之间的区别？

React router.push 和 router.replace 有什么区别？

如何使用react-router-dom v6执行编程导航？

我正在开发一个React应用程序，并尝试使用react-router-dom v6来实现编程导航。我想根据用户交互导航到不同的路线，例如按钮单击...

如何使用react-router v4重定向到绝对路径？

我有一个巨大的 Django Web 应用程序，其中一个模块（“仪表板”）是用 Node 和 React 编写的。用户登录由 Django 模块处理。 用户应登录主应用程序才能

使用 React Router v4 / v5 的嵌套路由

我目前正在努力使用 React Router v4 来嵌套路由。 最接近的例子是路由配置 React-Router v4 文档。 我想将我的应用程序分成两个不同的部分。 一个Fr...

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 文件中，我有类似的内容： /:区域设置/主页 这是哪个...