面试官我想做个Reacter(React路由)

路由的基础用法回顾， 源码study，文章首发于 docs，求个star

依赖

路由依赖于 react-router ，但是一般 pc 路由使用 react-router-dom ，它依赖于 react-router

npm i react-router-dom -S

基本路由

• Link 组件渲染路径，形式 a 标签
• Route 组件渲染组件，匹配路由
• HashRouter 是 hash 路由，BrowserRouter 是 history 路由
• component 和 render 都可以渲染组件，component 优先级匹配高于 render；render 为一个函数，可以做逻辑渲染，给组件传递参数

import { HashRouter, Route, Link } from 'react-router-dom'
class App extends Component {
  ...
  render() {
    return (
      

        首页
        Page
   {/* 配置路由规则  exact表示精确匹配，防止匹配其他页面的时候匹配到/，也就是首页*/}
        
        
         {
            return (
              
            );
          }}
        >
      
    );
  }
}

ReactDOM.render(
  
    
  , 
  document.getElementById('root')
)

• Link 只配置路由，NavLink 可做导航路由，可配置activeClassName 和 activeStyle

import { NavLink as Link } from 'react-router-dom';

class Nav extends Component {
  render () {
    return (
      

        
归档
        
关于
      
    );
  };
}

export default Nav;

嵌套路由

在想要嵌套的组件里再次配置路由

// User.js
import React from 'react'
import { Route, Link } from 'react-router-dom'

const User = (props) => {
      // match 可以读取上层路由
    const { match } = props
    return (
       

            登录
            注册
            login
            reg
       
    )
}

export default User

// App.js

路由传值

• params 动态路由传参，通过组件内 props.match.params 访问

// App.js
列表
{/* 必须使用 component 来指定组件，不然访问不到match */}


// List.js
const List = (props) => {
  console.log(props.match.params) // { id: 1, user: 4 } 
  return (
    

      { props.name }{ props.children }
    
  )
}

• query 传值直接取 ? 后面的值，但是 router 没提供相应的方法，需要自己写一个函数来提取参数
• 隐式传参，使用 to 传递对象 state

编程式路由

利用 props.history 来跳转路由

// List.js
const { history } = props

const goRoute = () => {
  if (history) {
    history..push('/user')
  }
}
// 可以使用对象传值
const goRoute = () => {
  if (history) {
    history..push({
        pathname: '/user',
        state: {
            id: 2
        }
    })
  }
}

重定向

重定向使用 Switch 组件

// ErrorPage.js
import React from 'react'

class Error extends React.Component{
    render(){
        return(
            
页面404
        )
    }
}
export default Error

// App.js
import ErrorPage from './components/ErrorPage'

class App extends React.Component {
  ...
  render() {
    ...
    {/* Switch表示如果匹配到了路由，就不再往下面匹配了，如果不写Switch，则一直会匹配到404页面 */}
    
      {/* 配置路由规则  exact表示精确匹配，防止匹配其他页面的时候匹配到/，也就是首页*/}
      Home
      
      
      {/* 必须使用 component 来指定组件，不然访问不到match */}
      
      
      {/* 没有写path表示匹配到所有的路径 */}
      
    
  }
}

withRouter

由于只有 Route 包裹的组件才可以访问到 props 内部的路由信息，可以引入 withRouter 高阶组件来使内部组件也可以访问路由信息

import React from 'react'

import { withRouter } from 'react-router-dom'


const GoBack = props => {
  console.log(props)
  const goBack = () => {
    props.history.go(-1)
  }
  return 返回
}

export default withRouter(GoBack)