react Router 学习

ゝ一世哀愁。 2023-07-07 08:54 20阅读 0赞

### 功能： ###

**1.进入项目后的默认路径是home，默认展示首页模块**

**2.点击路由，切换子组件**

**3.点击文章路由，根据传值不同进入三级详情路由，同时二级路由不显示**

**4.点击返回首页，跳转到首页**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70 2][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70 3][]

### **安装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**

**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 接收

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

**至此实现了上述功能**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200222150020314.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200222150143866.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200222150329112.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200222150431192.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70