功能:
1.进入项目后的默认路径是home,默认展示首页模块
2.点击路由,切换子组件
3.点击文章路由,根据传值不同进入三级详情路由,同时二级路由不显示
4.点击返回首页,跳转到首页
安装router
npm install react-router-dom --save
配置路由:
1.根组件index.js里面 引入路由组件你可以选择BrowserRouter路由或是HashRouter路由
import {BrowserRouter as Router,Route} from 'react-router-dom'
// import {HashRouter as Router} from 'react-router-dom'
2.然后用Router组件将根组件包括起来,Route组件是用来跳转和接收路由信息的
import React from 'react';
import ReactDOM from 'react-dom';
import './index.less';
import App from './App';
//Provider是react-redux提供的一个组件
import { Provider } from 'react-redux'
import store from './store/store'
import {BrowserRouter as Router,Route} from 'react-router-dom'
// import {HashRouter as Router} from 'react-router-dom'
ReactDOM.render(
<Provider store={store}>
<Router>
<Route component={App}></Route>
</Router>
</Provider>
,document.getElementById('root'));
根组件App.js
1.将首页,文章,用户这三个一级路由组件引入
2.用Link组件的to属性指定按钮的跳转路径
3.使用Route组件渲染这三个引入的子组件,Route用于传递路由信息,渲染组件,设置跳转信息
4.使用Route渲染组件有两种方式
第一种:<Route component={Users} path='/user'></Route> 使用component渲染,将路径指定为按钮要跳转的路径即可
第二种:使用render渲染,和上一种不能同时兼容,这种方法可携带参数,例如下面的x={1} ,routerProps是路由信息,可以一起传过去
5.exact 为严格匹配跳转路径
<Route path='/home' render={(routerProps)=>{
return <Home {...routerProps} x={1}/>
}}></Route>
6.Redirect 组件是默认跳转的地方 第一个若用户访问/,默认跳转到/home,第二个,若用户访问其他的路径,默认跳转到/404
<Redirect to='/home' from='/' exact></Redirect>
<Redirect to='/404'></Redirect>
7.Switch组件,包裹在要渲染的路由组件Route外面,可以对路径进行一个匹配和判断,组件内跳转路径多的时候一般都使用Switch
8.至此点击首页和用户已经可以正常跳转和展示子组件
import React, { Component } from 'react';
import {Route,NavLink as Link,Redirect,Switch} from 'react-router-dom'
import Home from './Home'
import Article from './Artical'
import Users from './User'
import ArticalDetail from './ArticalDetail'
import NotFound from './NotFound'
//exact 严格匹配
class App extends Component {
render() {
//console.log(this.props) //路由信息
return (
<div>
<ul>
<li><Link to='/home'>首页</Link></li>
<li><Link to='/art'>文章</Link></li>
<li><Link to='/user'>用户</Link></li>
</ul>
<Switch>
<Route path='/home' render={(routerProps)=>{
//console.log(routerProps) //路由信息
return <Home {...routerProps} x={1}/>
}}></Route>
<Route component={Article} path='/art' exact></Route>
<Route component={ArticalDetail} path='/art/:id'></Route>
<Route component={Users} path='/user'></Route>
<Route component={NotFound} path='/404'></Route>
{/* 默认跳到首页 */}
<Redirect to='/home' from='/' exact></Redirect>
<Redirect to='/404'></Redirect>
</Switch>
</div>
);
}
}
export default App
Artical.js 下面说下文章组件的路由配置,这里面有动态路由传参和二级路由
1.同样,使用Link标签做路由跳转
2.将跳转的参数携带在路径上即可
3.传参方法两种,
第一种:<Link to='/art/1'>文章一</Link> 就是上面写的那种
第二种:使用对象的方式跳转,携带的参数可以写在state中
在被传参页面可通过this.props.location.state 接收
<Link to={
{pathname:'/art/2',
state:{
from:"art隐式传参"
}
}
}>
文章二
</Link>
import React, { Component } from 'react';
import {NavLink as Link} from 'react-router-dom'
//query传参
//动态路由 /path/:id
//使用state 隐式传参
class Artical extends Component {
render() {
// 隐式传参的参数不会现实在地址栏里
return (
<div>
<Link to='/art/1'>文章一</Link>
<br/>
<Link to={
{pathname:'/art/2',
state:{
from:"art隐式传参"
}
}
}>文章二</Link>
</div>
);
}
}
export default Artical
下面看一下文章详情的路由配置,文章详情是文章点进去的三级路由,如果点击文章列表跳转后,不想展示文章列表,只想展示文章详情,那么文章详情路由可以在一级页面去渲染配置,不用经过二级文章列表组件
在App.js下面
引入文章详情组件,配置动态路由
import ArticalDetail from './ArticalDetail'
<Route component={ArticalDetail} path='/art/:id'></Route>
ArticalDetail.js 文章详情组件
1.组件内可以通过this.props.match.params.id接收路由参数,判断渲染什么详情
import React, { Component } from 'react'
export default class ArticalDetail extends Component {
render() {
//console.log('ArticalDetail',this.props.location.state) //{from: "art隐式传参"}
return (
<div>
文章详情 {this.props.match.params.id}
</div>
)
}
}
至此完成了三级路由及动态路由的功能
以上的内容是使用标签导航,下面说一下编程式导航
假设文章详情组件有个按钮button需要点击跳转到首页,而这个button是封装好的组件,这个组件并不是使用Route渲染的,因此并不携带路由信息
首先创建button.js组件
1.要实现跳转首页,首先在button上绑定点击事件goHome
2.想要使用路由信息跳转,因为本组件不是用Route标签渲染的,所以要引入高阶组件withRouter
3.withRouter(Button)在导出时使用withRouter包裹组件即可,然后就可以使用编程式导航this.props.history.push跳转,
还可传参
import React, { Component } from 'react'
//单独抽离的公共组件 作用 返回首页
//只有通过Route标签渲染的组件 才有路由属性 button没有通过Route标签渲染 所以不能直接使用this.props.history.push
//可通过withRouter高阶组件来使用
import {withRouter} from 'react-router-dom'
class Button extends Component {
render() {
return (
<div>
<button onClick={this.goHome.bind(this)}>返回首页</button>
</div>
)
}
//编程式导航 返回首页
goHome(){
// console.log('路由',this.props)
// this.props.history.push('/home')
this.props.history.push({
pathname:'/home',
state:{
x:"我是文章详情button组件传的值"
}
})
}
}
export default withRouter(Button)
然后将Button组件引入文章详情ArticalDetail.js 组件:
import React, { Component } from 'react'
import Button from './compoent/Button'
export default class ArticalDetail extends Component {
render() {
return (
<div>
文章详情 {this.props.match.params.id}
<Button></Button>
</div>
)
}
}
至此实现了上述功能
标签:学习,文章,跳转,react,import,组件,Router,路由 From: https://blog.51cto.com/u_12422954/5985779