React路由参数传递与嵌套路由的实现详细讲解_React_

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 ( 
App组件
Home--- About
 {/* /detail/1 /detail/2 ... 匹配成功；参数可以传递多个 */} 
 ) } } export default App

import React, { Component } from 'react' import { Link } from 'react-router-dom' class About extends Component { render() { return ( 
关于我们
 {Array(10) .fill('') .map((_, index) => ( 
新闻 -- {index}
 ))} 
 ) } } export default About

import React, { Component } from 'react' class Detail extends Component { render() { // 获取动态路由参数 对象 let id = this.props.match.params.id || 0 return ( 
详情页面 --- {id}
 ) } } export default Detail

import React, { Component } from 'react' import { Link } from 'react-router-dom' class About extends Component { render() { return ( 
关于我们
 {Array(10) .fill('') .map((_, index) => ( 
新闻 -- {index}
 ))} 
 ) } } export default About

import React, { Component } from 'react' import qs from 'querystring' // 封装一个方法，获取数据 // 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() { // 获取动态路由参数 对象 let id = this.props.match.params.id || 0 // search字符串 字符串 console.log(this.props.location.search) // 将字符串转为对象 console.log(qs.parse(this.props.location.search.slice(1))) // 如果用search字符串，推荐用它 const search = new URLSearchParams(this.props.location.search) // 获取就字段数据 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 ( 
详情页面 --- {id}
 ) } } export default Detail

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 ( 
 {/* 通过state隐式来传递数据到目标页面 */} 去详情
 {/* 编程式导航 */} 去详情页
 ) } } export default Home

import React, { Component } from 'react' class Detail extends Component { render() { // 获取页面隐式传过来的state数据 对象 console.log(this.props.location.state) console.log(this.props.location.search.toSearch()) return ( 
详情页面
 ) } } export default Detail

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

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 ( 
后台首页
后台首页
用户列表
 //  // 
后台首页
 // 
 // 
 // 
 // 后台首页 // 
 // 
 // 用户列表 // 
 // 
 // 
 //  //  //  //  //  // 
 // 
 //  ) } } export default Admin