ReactRouter安装与基础操作指南-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_69318049/article/details/134693160

一、安装路由

安装路由@5版本

npm i react-router-dom@5

二、使用前的准备

在src下新建两个文件夹分别是 router 、views 、index.js分别代表路由和页面的目录

router新建index.js

views新建home、films两个文件夹并且在内部新建index.js文件

index.js

 
import React from "react";
 
import App from './router/index'
import Tabbar from './views/Tabbar'
import { createRoot } from 'react-dom/client';//更新后的写法
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App>
    <Tabbar></Tabbar>
</App>);

router-index.js

HashRouter	路由模式（附带#号）
BrowserRouter	路由模式（没有#号）
Route	路由组件
Redirect	路由重定向
Switch	跳出路由

{this.props.children} 插槽的使用（可有可无）

<Route component={NotFound} /> 404组件

exact 精准匹配

import React, { Component } from 'react'
import {HashRouter,Route,Redirect,Switch} from 'react-router-dom'
import Films from '../views/films'
import Home from '../views/home'
import NotFound from '../views/NotFound'
export default class router extends Component {
  
  render() {
    return (
      <div>
        <HashRouter>
          {this.props.children}
            <Switch>
                <Route path="/films" component={Films}/>
                <Route path="/home" component={Home}/>

                <Redirect from="/" to="/films" exact />
                {/* 404组件 */}
                <Route component={NotFound} />
            </Switch>
     
        </HashRouter>
      </div>
    )
  }
}

films.js

import React, { Component } from 'react'
import './index.css'


export default class films extends Component {
  render() {
    return (
      <div>
        films
       
  
      </div>
    )
  }
}

home.js

import React, { Component } from 'react'


export default class home extends Component {
  render() {
    return (
      <div>
     home
      </div>
    )
  }
}

这样在路由地址就可以选择切换页面了

三、嵌套路由

films文件夹下新建component文件夹内部新建index.js 、page.js两个文件

films下的index.js

import React, { Component } from 'react'
import './index.css'
import Index from './component'
import Page from './component/page'
import { Route ,Redirect,Switch} from 'react-router-dom'
export default class films extends Component {
  render() {
    return (
      <div>
        <div className='head'></div>
        <Switch>
        <Route path="/films/index" component={Index} />
        <Route path="/films/page" component={Page} />

        <Redirect from="/films" to="/films/index"  />
        </Switch>
  
      </div>
    )
  }
}

component -> index.js

import React, { Component } from 'react'
import './index.css'

export default class index extends Component {


  render() {
    return (
      <div className='app1'>
      index
      </div>
    )
  }
}

component -> page.js

import React, { Component } from 'react'
import './page.css'

export default class page extends Component {
  render() {
    return (
      <div className='app'>
        page
      </div>
    )
  }
}

这样就实现了嵌套路由

四、跳转路由

路由跳转的三种方式：

①.标签NavLink

import React, { Component } from 'react'
import './page.css'
import { NavLink } from 'react-router-dom'
export default class page extends Component {
  render() {
    return (
      <div className='app'>
         <NavLink to="/films/index">toindex</NavLink>
      </div>
    )
  }
}

②.参数 this.props.history.push(url)

import React, { Component } from 'react'
import './index.css'
import { NavLink,} from 'react-router-dom'
export default class index extends Component {

  componentDidMount(){
   console.log(this.props.history.push); 
  }


  toPath(url){
    this.props.history.push(url)
  }
  render() {
    return (
      <div className='app1'>
        <button onClick={() =>{
          this.toPath("/films/page")
        }}>点击跳转</button>
        <NavLink to="/films/page">topage</NavLink>
      </div>
    )
  }
}

③.useHistory跳转

import React from 'react'
import { useHistory } from 'react-router-dom'
export default function Funcom(props) {
    const history = useHistory()
    const toPath = () => {
        history.push('/')
    }
    return (
        <div>
            <h1>useHistory跳转组件</h1>
            <button onClick={toPath}>跳转方式3</button>
        </div>
    )
}

五、跳转传参

①.组件式传参（路由添加参数，会在地址栏显示）

路由添加参数
<Route path="/films/FunctionaJump/:id" component={FunctionaJump} />

A页面代码
import React, { Component } from 'react'
import './index.css'
import { NavLink,} from 'react-router-dom'
export default class index extends Component {


  toPath(url){
    this.props.history.push(url+'/111')
  }
  render() {
    return (
      <div className='app1'>
       
        <button onClick={() =>{
          this.toPath("/films/FunctionaJump")
        }}>点击跳转toFunctionaJump</button>
       
      </div>
    )
  }

接受页面代码
import React from 'react'
import { useHistory } from 'react-router-dom'
export default function FunctionaJump(props) {
     console.log(props.match.params.id)
  
  return (
    <div>
      
    </div>
  )
}

②.组件式传参（无需路由添加参数，不会在地址栏显示，刷新消失）

state query两种写一块

A组件
import React, { Component } from 'react'
import './index.css'

export default class index extends Component {

  toPath1(url){
    this.props.history.push({pathname:url,query:{id:222}})
 this.props.history.push({pathname:url,state:{id:222}})
  }
  render() {
    return (
      <div className='app1'>
        <button onClick={() =>{
          this.toPath1("/films/Fun1")
        }}>点击跳转</button>
        
      </div>
    )
  }
}

接受参数的组件
import React from 'react'
import { useHistory } from 'react-router-dom'
export default function FunctionaJump(props) {
    console.log(props.location.query.id);
 this.props.history.push({pathname:url,state:{id:222}})
   
  return (
    <div>
     
    </div>
  )
}

六、路由拦截

修改router下面的index,js需要使用路哟与拦截的路径

import React, { Component } from 'react'
import {HashRouter,Route,Redirect,Switch} from 'react-router-dom'
import Films from '../views/films'
import Home from '../views/home'
import NotFound from '../views/NotFound'
import Login from '../views/login'
function isNext(){
  return false
}
export default class router extends Component {
  render() {
    return (
      <div>
        <HashRouter>
          {this.props.children}
            <Switch>
                <Route path="/films" component={Films}/>
*********************此处为路由拦截写法**********************
                <Route path="/home" render={(props) => {
                  return isNext()? <Home  {...props}/>:<Redirect to="/login" />
                }}/>

                <Route path="/login" component={Login}/>

                <Redirect from="/" to="/films" exact />
                {/* 404组件 */}
                <Route component={NotFound} />
            </Switch>
     
        </HashRouter>
      </div>
    )
  }
}

七、withRouter的使用

const WithFilmItem = withRouter(WithRouter)（不需要传递props即可使用）

import React from 'react'
import { useHistory ,withRouter} from 'react-router-dom'

export default function FunctionaJump(props) {
    console.log(props.location.state.id);
    const history = useHistory()
    const toHome = () =>{
        history.push('/films/index')
    }
  return (
    <div>
        <button onClick={toHome}>toHome</button>
        <WithFilmItem />
    </div>
  )

}
const WithFilmItem = withRouter(WithRouter)
function  WithRouter(props){
  const toHome = () =>{
    props.history.push('/films/index')
}
  return (
    <div>
        <button onClick={toHome}>tohome</button>
    </div>
  )
}