先把版本写在前面
"react-router-dom": "^4.2.2"
以前就得版本使用Context对象来控制路由，现在新版本改了用history了
使用导航在react-router-dom提供了两个控件BrowserRouter和HashRouter都可以实现导航，区别看这里 这篇手记的demo中使用的是BrowserRouter
先上代码
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import AppRoutes from "./AppRoutes";
import {
BrowserRouter,
} from 'react-router-dom';
ReactDOM.render(<BrowserRouter>
{AppRoutes}
</BrowserRouter>, document.getElementById('root'));
registerServiceWorker();
- 先从
react-router-dom导入需要的BrowserRouter控件
ReactDOM.render(<BrowserRouter>
{AppRoutes}
</BrowserRouter>, document.getElementById('root'));
- 将
BrowserRouter做为最底层控件
AppRoutes.js
import {
Route,
} from 'react-router-dom';
import App from './App';
import Page1 from './Page1';
import Page2 from './Page2';
/**
* Routes: https://github.com/reactjs/react-router/blob/master/docs/API.md#route
*
* Routes are used to declare your view hierarchy.
*
* Say you go to http://material-ui.com/#/components/paper
* The react router will search for a route named 'paper' and will recursively render its
* handler and its parent handler like so: Paper > Components > Master
*/
const AppRoutes = (
<div>
<Route exact path="/" component={App}/>
<Route path="/page1" component={Page1}/>
<Route path="/page2" component={Page2}/>
</div>
);
export default AppRoutes;
const AppRoutes = (
<div>
<Route exact path="/" component={App}/>
<Route path="/page1" component={Page1}/>
<Route path="/page2" component={Page2}/>
</div>
);
- exact控制匹配到/路径时不会再继续向下匹配，path标识路由的路径，component表示路径对应显示的组件。
- 创建了三个路径，首页(http://localhost:3000/) -> App 、page1(http://localhost:3000/page1) -> Page1、page2(http://localhost:3000/page2) -> Page2
- 也可以index.js中的{AppRoutes}直接替换成上面的代码，这里这么写是为了方便项目管理
到这儿路已经铺好了，下一步就是使用了
App.js
import React, { Component } from 'react';
import {
Link
} from 'react-router-dom';
var dic = {
name:"hello",
value:"world",
}
class App extends Component {
render() {
return (
<div className="App">
App
<div>
<Link to={
{pathname:"/page1",
state:{data:dic}}
}> Page1</Link>
</div>
</div>
);
}
}
export default App;
-
第一种方法使用
react-router-dom中的<Link>控件1、 跳转到page1页面，只跳转不传值，可以这样
<Link to= "/page1">to Page</Link>
2、跳转并传值
<Link to={
{pathname:"/page1",
state:{data:dic}}
}> Page1</Link>
这时候需要传一个字典
- pathname:跳转页路径
- 给下一页传的值,这个键值对可以随意写，key值不一定是
data,可以随意写,但是这里的key值是什么，下个页面也对应要用这个key值来取值.
除了这个<Link>还有一个<NavLink>跟这个意思差不多，不写了
-
第二种方法应该是最常用的了,history 控制路由跳转
page1.js
import React, { Component } from 'react';
import {
Link,
} from 'react-router-dom';
var args = "one world one dream";
var data="";
class Page1 extends Component {
constructor(props){
super(props);
//获取上个页面传过来的值
/*
* data是state中的一个字段,因为app.js传过来的值对应的key是data,所以这里这么写
* */
data = this.props.location.state.data;
}
componentDidMount(){
console.log(this.props.location.state.data);
}
toNextPage=()=>{
//使用history的push方法,实现跳转
this.props.history.push({
pathname:"/page2",
state:{args:args}
});
};
render() {
return (
<div >
Page1 <br/>
{"App说:"+ data.name+data.value}
<div>
{/*使用Link控件跳转*/}
<Link to={
{pathname:"/page2",
state:{args:args}}
}> Page2</Link>
</div>
{/*使用history的push方法,实现跳转*/}
<button onClick={()=>this.toNextPage()}>
去下一页
</button>
</div>
);
}
}
// export default withRouter(Page1);
export default Page1
toNextPage() 方法即我们需要的方法
toNextPage=()=>{
//使用history的push方法,实现跳转
this.props.history.push({
pathname:"/page2",
state:{args:args}
});
};
history被放在props属性下，push跳转到下一页push中的参数和<Link>控件设置方法一样
传参结束了，该获取了
page1.js中
constructor(props){
super(props);
//获取上个页面传过来的值
/*
* data是state中的一个字段,因为app.js传过来的值对应的key是data,所以这里这么写
* */
data = this.props.location.state.data;
}
哦了!跳转，传值，取值都说完了，应该够用了,demo下载
#参考资料
