react-router@5.2.0

1.下载 react-router-dom

2.引入

import {
  HashRouter,
  Link,
  Route,
  Switch,
  withRouter
} from 'react-router-dom'

 <HashRouter>
          <Link to='/'>首页</Link>

          <Link to='/about'>关于</Link>

          <Link to='/profile'>我的</Link>
  
          <Switch>
            <Route exact path='/' component={Home} />
            {/* 模糊匹配 当有 / 的时候 
             就会匹配到Home组建,当有exact的精准匹配的时候  就可以一一对应了 */}

            <Route path='/about' component={About} />

            <Route path='/profile' component={Profile} />

            {/* 当没有匹配到的时候 */}
            <Route component={Nomatch} />

          </Switch>
 </HashRouter>

动态路由的用法     当页面呈现 比如 http://127.0.0.1:3000/page/5 的时候就能够 匹配到

<Link to={`/page/${id}`}>page</Link>


<Route path={`/page/:id`} component={Page}/>

路由的嵌套

父组件

<Link to='/about'>关于</Link>

<Route path='/about' component={About} />

About组件

return (
    <div>
        about路由组件页面
      <Link  to='/about'>天津</Link>
      <br />
      <Link  to='/about/yj'>影久</Link>
      <br />
      <Link  to='/about/qbd'>仟北代</Link>
      <br />
      <Link  to='/about/j'>姜</Link>
    

      <Switch>
        <Route exact path='/about' component={TJ}/>
        <Route path='/about/yj' component={YJ}/>
        <Route path='/about/qbd' component={QBD}/>
        <Route path='/about/j' component={J}/>
        <Route path='/about/jr' component={JR}/>
      </Switch>
    </div>
  )

 通过代码来实现路由跳转   在props.history.push中去跳转

export default function about(props) {
// 函数式组件 在参数里传入  props
  let enterRouter = () => {
    console.log(props)
    // 这个history是给路由组件用的  在普通组件里是用不了的
    props.history.push('/about/jr')
  }

  return (
    <div>about

      <br />
      <Link  to='/about'>天津</Link>
      <br />
      <Link  to='/about/yj'>影久</Link>
      <br />
      <Link  to='/about/qbd'>仟北代</Link>
      <br />
      <Link  to='/about/j'>姜</Link>
      <p onClick={enterRouter}> 加入我们</p>

      <Switch>
        <Route exact path='/about' component={TJ}/>
        <Route path='/about/yj' component={YJ}/>
        <Route path='/about/qbd' component={QBD}/>
        <Route path='/about/j' component={J}/>
        <Route path='/about/jr' component={JR}/>
      </Switch>
    </div>
  )
}

在非路由组件里要使用 代码跳转 路由的时候 ，不能直接使用 history.push()来实现 ， 该方法只能提供给 路由组件

如下

class App extends Component {
  enterR = () => {
    console.log(this.props)
    this.props.history.push('/about/ggg')
  }

  render() {
    return (
      <div>
         <button onClick={this.enterR}>普通组件路由跳转</button>
      </div>
    )
  }
}

// 引入withRouter
export default withRouter(App)

再到App.js中用 BrowserRouter 包裹住

ReactDOM.render(
  <BrowserRouter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>
  ,
  document.getElementById('root')
);

 动态路由的传递参数

{/* 这里的名字不能随便起  就得用这些属性 */}
  <Link to={{pathname:'/page3',search:'zj',state:info}}>page3</Link>

  <Route path={`/page3`} component={Page3}/>

 

react-router路由集中管理

1.下载 react-router-config

import about from "../components/about";
import home from "../components/home";
import profile from "../components/profile";
import any from '../components/any'
import aboutHistory from "../components/aboutHistory";
import aboutCtrual from '../components/aboutCtrual'
const routes = [
    {
        path:'/',
        exact:true,
        component:home
    },
    {
        path:'/about',
        component:about,
        routes:[
            {
                path:'/about',
                exact:true,
                component:aboutCtrual
            },
            {
                path:'/about/history',
                component:aboutHistory
            }
        ]
    },
    {
        path:'/profile',
        component:profile
    },
    {
        path:'/any',
        component: any
    }
    
]

export default routes

import React, { Component } from 'react'
import {renderRoutes} from 'react-router-config'
import routes from './router/index'
import {
  withRouter
} from 'react-router-dom'

class App extends Component {
  render() {
    return (
      <div>
          {renderRoutes(routes)}
      </div>
    )
  }
}
export default withRouter(App)

在 about的 路由组件里

import React, { Component } from 'react'
import { renderRoutes ,matchRoutes} from 'react-router-config'
export default class about extends Component {
  render() {
    console.log(this.props)
    // 用来匹配符合条件的 一个辅助工具
    console.log(matchRoutes(this.props.route.routes,'/about'))
    return (
      <div>
        about
        {renderRoutes(this.props.route.routes)}
      </div>
    )
  }
}