react Router 学习

 功能：

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>
        )
    }

}

至此实现了上述功能