react-router-dom 相关问题

我在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即可跳转到登录页面 }; 登录像这样

javascript reactjs react-router-v4 react-router-dom

回答 7 投票 0

重定向react-router-dom v6

我有一个问题，在youtube上观看一个使用history.push('/login?redirect=shipping')的视频，我如何使用navigate修改它，因为如果我使用字符串navigate('/login?redirect =寄送...

reactjs react-redux react-router-dom

回答 5 投票 0

设置仪表板和子组件的路由

我有一个简单的 React 仪表板，可以获取品牌数据并向用户显示品牌选项。仪表板有两个主要组件仪表板和结果。结果是 Dashboard 的子组件...

reactjs typescript react-router-dom

回答 1 投票 0

警告：历史记录一次仅支持一个提示

我试图防止由于刷新、后退导航等浏览器事件而丢失我的 React 应用程序中未保存的数据。我将组件从react-router-dom 放到了render 方法中。然后...