React路由參數(shù)傳遞與嵌套路由的實現(xiàn)詳細講解

更新時間：2022年09月28日 15:37:13 作者：月光曬了很涼快

這篇文章主要介紹了React路由參數(shù)傳遞與嵌套路由的實現(xiàn)，嵌套路由原則是可以無限嵌套，但是必須要讓使用二級路由的一級路由匹配到，否則不顯示，需要的朋友可以參考一下

1. 頁面路由參數(shù)傳遞

1.1 動態(tài)路由參數(shù)

描述：

以“/detail/:id”形式傳遞的數(shù)據(jù)，在落地組件中通過this.props.match.params得到。

使用：

App.jsx：

import React, { Component } from 'react'
import { Route, Link, NavLink, Switch, Redirect } from 'react-router-dom'
// 匹配成功后渲染的組件
import Home from './views/Home'
import About from './views/About'
import Detail from './views/Detail'
import Notfound from './views/Notfound'
class App extends Component {
  render() {
    return (
      <div>
        <h3>App組件</h3>
        <div>
          <NavLink exact to="/">Home</NavLink>---
          <NavLink to="/about">About</NavLink>
        </div>
        <hr />
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        {/* /detail/1   /detail/2 ... 匹配成功；參數(shù)可以傳遞多個 */}
        <Route path="/detail/:id/:name?" component={Detail} />
            
        <Redirect exact from="/" to="/home" />
            
        <Route component={Notfound} />
        </Switch>
      </div>
    )
  }
}
export default App

about頁面：

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
class About extends Component {
  render() {
    return (
      <div>
        <h3>關(guān)于我們</h3>
        <hr />
        <ul>
          {Array(10)
            .fill('')
            .map((_, index) => (
              <li key={index}>
                <Link to={`/detail/${index}?`}>新聞 -- {index}</Link>
              </li>
            ))}
        </ul>
      </div>
    )
  }
}
export default About

詳情頁面：

import React, { Component } from 'react'
class Detail extends Component {
  render() {
    // 獲取動態(tài)路由參數(shù)   對象
    let id = this.props.match.params.id || 0
    return (
      <div>
        <h3>詳情頁面 --- {id}</h3>
      </div>
    )
  }
}
export default Detail

1.2 search字符串

描述：

通過地址欄中的 ?key=value&key=value傳遞。

使用：

關(guān)于頁面：

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
class About extends Component {
  render() {
    return (
      <div>
        <h3>關(guān)于我們</h3>
        <hr />
        <ul>
          {Array(10)
            .fill('')
            .map((_, index) => (
              <li key={index}>
                <Link to={`/detail/${index}?age=${2 + index}`}>新聞 -- {index}</Link>
              </li>
            ))}
        </ul>
      </div>
    )
  }
}
export default About

詳情頁面：

import React, { Component } from 'react'
import qs from 'querystring'
// 封裝一個方法，獲取數(shù)據(jù)
// String.prototype.toSearch = function () {
//   let searchData = {}
//   const search = new URLSearchParams(this)
//   search.forEach((value, key) => {
//     searchData[key] = value
//   })
//   return searchData
// }
class Detail extends Component {
  render() {
    // 獲取動態(tài)路由參數(shù)   對象
    let id = this.props.match.params.id || 0
    // search字符串  字符串
    console.log(this.props.location.search)
    // 將字符串轉(zhuǎn)為對象
    console.log(qs.parse(this.props.location.search.slice(1)))
    // 如果用search字符串，推薦用它
    const search = new URLSearchParams(this.props.location.search)
    // 獲取就字段數(shù)據(jù)
    console.log(search.get('age'))
    let searchData = {}
    search.forEach((value, key) => {
      searchData[key] = value
    })
    console.log(searchData)
    // 使用迭代對象獲取
    // for (let [key, value] of search.entries()) {
    //   searchData[key] = value
    // }
    // console.log(searchData)
    // 使用封裝的方法獲取
    // console.log(this.props.location.search.toSearch())
    return (
      <div>
        <h3>詳情頁面 --- {id}</h3>
      </div>
    )
  }
}
export default Detail

1.3 頁面參數(shù)隱式傳遞

描述：

隱式傳參（state），通過地址欄是觀察不到的；通過路由對象中的state屬性進行數(shù)據(jù)傳遞，在落地組件中通過this.props.location.state得到。

使用：

home頁面：

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
class Home extends Component {
  jumpDetail = () => {
    this.props.history.push({
      pathname: '/detail',
      search: 'name=zhangsan',
      state: { id: 200 }
    })
  }
  render() {
    return (
      <div>
        <div>
          {/* 通過state隱式來傳遞數(shù)據(jù)到目標(biāo)頁面 */}
          <Link to={{ pathname: '/detail', state: { id: 100 }, search: 'name=lisi' }}>去詳情</Link>
        </div>
        <hr />
        {/* 編程式導(dǎo)航 */}
        <button onClick={this.jumpDetail}>去詳情頁</button>
      </div>
    )
  }
}
export default Home

詳情頁面：

import React, { Component } from 'react'
class Detail extends Component {
  render() {
    // 獲取頁面隱式傳過來的state數(shù)據(jù)  對象
    console.log(this.props.location.state)
    console.log(this.props.location.search.toSearch())
    return (
      <div>
        <h3>詳情頁面</h3>
      </div>
    )
  }
}
export default Detail

tosearch方法（已導(dǎo)入入口文件中，所以可以直接使用）：

String.prototype.toSearch = function () {
  let searchData = {}
  if (this.toString() != '') {
    const search = new URLSearchParams(this.toString())
    search.forEach((value, key) => {
      searchData[key] = value
    })
  }
  return searchData
}

2. 嵌套路由

后臺首頁：

import React, { Component } from 'react'
import { NavLink, Redirect, Route, Switch } from 'react-router-dom'
import { AdminContainer } from './style'
import Index from '../Index'
import User from '../User'
class Admin extends Component {
  render() {
    // 在子路由定義的組件中，可以通過props中提供的路由對象來獲取父路由定義的地址
    // let parentRoutePath = this.props.match.path
    return (
      <AdminContainer>
        <h3>后臺首頁</h3>
        <div>
          <ul>
            <li>
              <NavLink to="/admin/index">后臺首頁</NavLink>
            </li>
            <li>
              <NavLink to="/admin/user">用戶列表</NavLink>
            </li>
          </ul>
          <div>
            <Switch>
              <Route path='/admin/index' component={Index} />
              <Route path='/admin/user' component={User} />
              <Redirect from='/admin' to='/admin/index' />
            </Switch>
          </div>
        </div>
      </AdminContainer>
      // <AdminContainer>
      //   <h3>后臺首頁</h3>
      //   <div>
      //     <ul>
      //       <li>
      //         <NavLink to={`${parentRoutePath}/index`}>后臺首頁</NavLink>
      //       </li>
      //       <li>
      //         <NavLink to={`${parentRoutePath}/user`}>用戶列表</NavLink>
      //       </li>
      //     </ul>
      //     <div>
      //       <Switch>
      //         <Route path={`${parentRoutePath}/index`} component={Index} />
      //         <Route path={`${parentRoutePath}/user`} component={User} />
      //         <Redirect exact from={parentRoutePath} to={`${parentRoutePath}/index`} />
      //       </Switch>
      //     </div>
      //   </div>
      // </AdminContainer>
    )
  }
}
export default Admin