如何通过单击反应路由器 v4 中的按钮在路径上导航?
How to navigate on path by button click in react router v4?
我在 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"
查看此 post 了解更多详情: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:
中有这个路径 <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"
查看此 post 了解更多详情: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>
组件