react-router 路由重定向

重定向

about.js:

import React, {
      Component } from 'react'
import about1 from './about1.js'
import about2 from './about2.js'
import {
      Link,Route } from 'react-router-dom'
export default class index extends Component {
     
  componentDidMount(){
     
    // console.log(this.props)
    // console.log(this.props.location.search.substring(1).split('&'))
    // let params =new URLSearchParams(this.props.location.search)
    // console.log(params.get('name'))
    // console.log(params.get('age'))
    console.log(this.props.match.params.name)
    console.log(this.props.match.params.age)
  }
  render() {
     
    return (
      <div>
        this is about page
        <br />
        <Link to ='/about/about1'>About1</Link>----
        <Link to ='/about/about2'>About2</Link>
        <br />
        <Route path='/about/about1' component={
     about1}></Route>
        <Route path='/about/about2' component={
     about2}></Route>
      </div>
    )
  }
}

切记使用嵌套路由的时候是不能进行传递参数的，要不然会使得嵌套路由失效：


这时将App.js里面的传参去掉，就可以恢复正常，
PS：react里面的嵌套路由不像vue里面可以省略子级路由的路径前面共有的父级路劲，如/about/about1写成/about1,这样是不可以的，发挥不了作用的
所以react相比vue，更加贴近于原生js

路由重定向，这时我们只需要在App.js里面的定义规则进行操作就可以了：
App.js:

import React, {
      Component } from 'react'
// import { HashRouter,Link,Route } from 'react-router-dom'
import {
      BrowserRouter as Router,Link,Route, Redirect } from 'react-router-dom'
import {
      Home,About } from './components'

  export default class App extends Component {
     
    render() {
     
      return (
        <Router>
          <Link to="/home/a">Home</Link>---
          <Link to="/about">About</Link>
          <br />
          <Route exact path='/home' component={
     Home}></Route>
          <Route path='/about' component={
     About}></Route>
          <Route path='/' render={
     this.redirect}></Route>
        </Router>
      )
    }
    redirect = () => {
     
      return (
          <Redirect to='/about/about1'></Redirect>
      )
    }
  }

那么此时打开网页，默认展示的就是about 组件下面的about1 组件了