react-router-dom的使用(react框架路由)
一、前言
截止目前在网上搜索react路由,有react-router和react-router-dom两种,后来研究发现,后者是前者更新升级后的产物。可以用js代码来控制路由的跳转。
官网:https://reacttraining.com/react-router/web/guides/quick-start
二、路由的使用
以下代码见github:https://github.com/hushaohhy/react-router-dom-demo
下文将从创建项目开始,到实现简单的js控制路由跳转。
1、使用create-react-app新建router-project项目
create-react-app router-project
2、使用cnpm或npm或yarn安装react-router-dom
yarn add react-router-dom --save-dev
cnpm install react-router-dom --save-dev
3、router基础的使用参考该网址https://reacttraining.com/react-router/web/example/basic
4、以下对router进行封装,方便使用
1)项目结构
index.js是项目的入口文件,其中定义了渲染的第一个组件是App.js因此,App.js也是入口组件。
2)router.js文件的内容
import Page1 from '../components/Page1'
import Page2 from '../components/Page2'
import Page3 from '../components/Page3'
import Page3Details from "../components/Page3Details"
let AppRouter = [
{
path:'/',// 首页默认加载的页面
component:Page1,// 所使用的组件
exact: true //是否为严格模式
},
{
path:'/page2',
component:Page2
},
{
path:'/page3',
component:Page3,
routes:[/* * 嵌套路由并传参*/
{
path:'/page3/:id',
component:Page3Details
}
]
}
]
export default AppRouter;
App.js内容
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom"
import AppRouter from './router/router'
class App extends Component {
render() {
return (
<Router>
<div className="App">
{
AppRouter.map((route,key) => {
if(route.exact) {
// 严格模式返回
return(
<Route exact
key={key}
path={route.path}
render={props => (
//主要是为了传递嵌套路由到子组件
//类似于 <User {...props} routes={route.routes} />
<route.component {...props} routes={route.routes} />
)}
/>
)
}else {
return(
<Route
key={key}
path={route.path}
render={props => (
//主要是为了传递嵌套路由到子组件
//类似于 <User {...props} routes={route.routes} />
<route.component {...props} routes={route.routes} />
)}
/>
)
}
})
}
</div>
</Router>
);
}
}
export default App;
Page1.js内容
import React, { Component } from 'react';
export default class Page1 extends Component{
goRouter(url) {
this.props.history.push({pathname:url,state:{'day':'所传参数'}})
}
render() {
return (
<div>
<h1>这是page1页面组件</h1>
<button onClick={this.goRouter.bind(this,'/page2')}>goPage2</button>
</div>
)
}
}
Page2.js内容
import React, { Component } from 'react';
export default class Page2 extends Component{
constructor(props) {
super(props)
console.log(this.props.location.state.day)
}
render() {
return (
<div>
<h1>这是page2页面组件{this.props.location.state.day}</h1>
</div>
)
}
}
Page3.js内容这是含有子路由的写法
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom"
export default class Page3 extends Component{
constructor(props) {
super(props)
console.log(this.props)
}
render() {
let {match,routes} = this.props
return (
<div>
<h1>这是page3页面组件</h1>
<ul>
<li>
<Link to={`${match.url}/li1`}>路径是li1</Link>
</li>
<li>
<Link to={`${match.url}/li2`}>路径是li2</Link>
</li>
</ul>
{
routes.map((route,key) =>{
if(route.exact) {
return(
<Route exact key={key} path={route.path} component={route.component} />
)
}else {
return(
<Route key={key} path={route.path} component={route.component} />
)
}
})
}
</div>
)
}
}
Page3Details.js内容
import React, { Component } from 'react';
export default class Page3Details extends Component{
render() {
return (
<div>
<h1>这是page3页面的详情组件{this.props.match.params.id}</h1>
</div>
)
}
}
5、以上实现了对路由的封装
三、路由中所用到的知识总结
1、js控制路由跳转
this.props.history.push({pathname:'/page2',state:{'day':'所传参数'}})
在page2页面接受所传参数
this.props.location.state.day
未完待续.....
上一篇: react中hooks的使用方法
下一篇: Centos 7搭建memcached
推荐阅读