使用react router,我可以使用Link元素来创建由react route本地处理的链接。
我看到它在内部调用this.context.transitionTo(…)。
我想做导航。不是来自链接,而是来自下拉选择(例如)。我如何在代码中执行此操作?this.context是什么?
我看到了导航混合,但我可以在没有混合的情况下这样做吗?
使用react router,我可以使用Link元素来创建由react route本地处理的链接。
我看到它在内部调用this.context.transitionTo(…)。
我想做导航。不是来自链接,而是来自下拉选择(例如)。我如何在代码中执行此操作?this.context是什么?
我看到了导航混合,但我可以在没有混合的情况下这样做吗?
当前回答
React路由器v6
我已经有一段时间没有接触过React了,但我想感谢并强调Shimrit Snapir的以下评论:
在React Router 6.0上,<Redirect/>更改为<Navigator/>
React路由器V4
tl:dr;
if (navigate) {
return <Redirect to="/" push={true} />
}
简单而声明性的答案是,需要将<Redirectto={URL}push={boolean}/>与setState()结合使用
push:boolean-如果为true,重定向将向历史中推送一个新条目,而不是替换当前条目。
import { Redirect } from 'react-router'
class FooBar extends React.Component {
state = {
navigate: false
}
render() {
const { navigate } = this.state
// Here is the important part
if (navigate) {
return <Redirect to="/" push={true} />
}
// ^^^^^^^^^^^^^^^^^^^^^^^
return (
<div>
<button onClick={() => this.setState({ navigate: true })}>
Home
</button>
</div>
)
}
}
这里有一个完整的例子。在这里阅读更多信息。
PS.该示例使用ES7+属性初始化器初始化状态。如果你感兴趣的话,也可以看看这里。
其他回答
只需使用useNavigate,即可使用最新版本的react
新文件.js
import { useNavigate } from "react-router-dom";
const Newfile = () => {
const navigate = useNavigate();
....
navigate("yourdesiredlocation");
....
}
export default Newfile;
在代码中使用上述的useNavigate功能。
以下是如何使用带有ES6的react router v2.0.0来实现这一点。react路由器已远离mixin。
import React from 'react';
export default class MyComponent extends React.Component {
navigateToPage = () => {
this.context.router.push('/my-route')
};
render() {
return (
<button onClick={this.navigateToPage}>Go!</button>
);
}
}
MyComponent.contextTypes = {
router: React.PropTypes.object.isRequired
}
只需使用useNavigate from react router dom
import { useNavigate } from "react-router-dom";
const MYComponent = () => {
const navigate = useNavigate();
navigate("Xyz/MYRoutes");
}
export default MYComponent;
在代码中使用上述的useNavigate功能。
React Router 4.x答案
在我这一方面,我希望有一个单独的历史对象,我甚至可以携带外部组件。我喜欢按需导入一个history.js文件,并对其进行操作。
您只需将BrowserRouter更改为Router,并指定历史属性。这对你来说没有任何改变,除了你有自己的历史对象,你可以随心所欲地操纵它。
您需要安装历史记录,即react router使用的库。
示例用法,ES6表示法:
history.js
import createBrowserHistory from 'history/createBrowserHistory'
export default createBrowserHistory()
基本组件.js
import React, { Component } from 'react';
import history from './history';
class BasicComponent extends Component {
goToIndex(e){
e.preventDefault();
history.push('/');
}
render(){
return <a href="#" onClick={this.goToIndex}>Previous</a>;
}
}
如果您必须从实际从Route组件渲染的组件进行导航,还可以从props访问历史,如下所示:
基本组件.js
import React, { Component } from 'react';
class BasicComponent extends Component {
navigate(e){
e.preventDefault();
this.props.history.push('/url');
}
render(){
return <a href="#" onClick={this.navigate}>Previous</a>;
}
}
反应路由器dom:5.1.2
该网站有3个页面,所有页面都在浏览器中动态呈现。尽管页面从未刷新,请注意React Router在浏览网站时保持URL最新。这保留浏览器历史记录,确保后面的内容按钮和书签工作正常Switch查看所有子项元素,并渲染其路径为与当前URL匹配。随时使用您有多条路线,但只需要一条一次渲染一个
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export default function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
<hr />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
</div>
</Router>
);
}
// You can think of these components as "pages"
// in your app.
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
function Dashboard() {
return (
<div>
<h2>Dashboard</h2>
</div>
);
}```