前端路由（六）-动态路由——路由映射的path可以传参进行模糊匹配 & parseInt() 函数可解析一个字符串，并返回一个整数 & filter-返回满足条件的新数组

动态路由——路由映射的path可以传参进行模糊匹配 & parseInt() 函数可解析一个字符串，并返回一个整数 & filter-返回满足条件的新数组

• 路由的路径可以进行模糊匹配

  • 路由映射的path可以是模糊匹配

  <Route path='/users/:id' exact component={UserInfo}/>
  <Route path='/users/:id/books/:bid' component={BookInfo}/>
  

  <Link to='/users/123'>张三</Link>
  <Link to='/users/456'>李四</Link>
  <Link to='/users/456/books/111'>王五</Link>
  <Link to='/users/456/books/222'>赵六</Link>
  

  function UserInfo (props) {
    let id = props.match.params.id
    let bid = props.match.params.bid
  }
  

实例

第一步：安装依赖包

npm install react-router-dom -D

第二步：在APP.js同层级的component下新建router文件夹，其下新建文件05-动态路由.js

第三步：在App.js中进行导入

import React from 'react';
import BaseRouter from './component/router/05-动态路由'

function App () {
  return (
    <div>
      <BaseRouter/>
    </div>
  )
}

export default App;

component/router/05-动态路由.js文件如下

/*
  动态路由：路由的路径可以动态进行匹配，并且可以通过路径进行参数传递
*/

import React from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'

function Zhangsan () {
  return (
    <div>
      <div>姓名：张三</div>
      <div>年龄：12</div>
    </div>
  )
}
function Lisi () {
  return (
    <div>
      <div>姓名：李四</div>
      <div>年龄：13</div>
    </div>
  )
}
function CommonInfo (props) {
  console.log(props)
  console.log(props.match.params)
  // 获取路由参数
  let id = props.match.params.id
  // 更加id获取用户的详细数据
  let data = [{
    id: 123,
    name: '张三',
    age: 12
  }, {
    id: 456,
    name: '李四',
    age: 13
    }]
  console.log(typeof id)
  let info = data.filter(item => {
    // parseInt() 函数可解析一个字符串，并返回一个整数
    return item.id === parseInt(id)
  })
  console.log(info)
  console.log(info[0])
  console.log(info[1])
  info = info[0]

  return (
    <div>
      <div>姓名：{info.name}</div>
      <div>年龄：{info.age}</div>
    </div>
  )
}
function BookInfo(props) {
  console.log(props)
  let bid = props.match.params.bid

  return (
    <div>
      <div>图书信息:{bid}</div>
    </div>
  )
}


class BaseRouter extends React.Component {
  render () {
    return (
      <BrowserRouter>
        <div>
          <div>基础路由</div>
          <hr/>
          {/*路由链接*/}
          <Link to='/user/123'>张三</Link>
          <Link to='/user/456'>李四</Link>
          <Link to='/user/123/book/1'>图书1</Link>
          <Link to='/user/123/book/2'>图书2</Link>
          {/*路由组件显示的位置*/}
          {/*<Route path='/user/123' component={Zhangsan}/>
          <Route path='/user/456' component={Lisi}/>*/}
          <Route path='/user/:id' exact component={CommonInfo} />
          {/* 复杂形式 */}
          <Route path='/user/:id/book/:bid' component={BookInfo}/>
        </div>
      </BrowserRouter>
    )
  }
}

export default BaseRouter

npm run start启动项目，页面如下：