demand

Enter /routerStudy and automatically redirect to /routerStudy/child1

Routing page structure

1. Native version

index.js

import React, {lazy} from 'react' // Use route lazy loading
import ReactDOM from 'react-dom'

import {NavLink, HashRouter as Router, Switch, Route, Redirect} from "react-router-dom" //BrowserRouter is the History mode of the route
import {Suspense} from 'react' // Cooperate with lazy route loading

// Import the parent route routerStudy
const routerStudy = lazy(() = > import ('@/study/routerStudy/routerStudy'))

ReactDOM.render(
  <React.StrictMode>{/** Can have only one Router root node router-s **/}<Router>
      <>
          <div className='nav' style={{border: 'solid 1px red', padding: '20px'}} >
            <NavLink activeStyle={{color:'red'}} to='/routerStudy'>I am a LinkStudy</NavLink>
          </div>
          <Suspense fallback={<div>loading</div>} ><Switch>{{/ * renderRoutes (routes)} * /} {/ * native routing render test * /}<Route path='/routerStudy'  component={routerStudy}></Route>
            </Switch>
          </Suspense>
        </>
    </Router>
    {/** There can be only one Router root node router-e **/}
  </React.StrictMode>,
  document.getElementById('root'));Copy the code

The parent route routerStudy. Js

import React, {lazy} from 'react'
import {NavLink, Redirect, Route, Switch} from "react-router-dom"
import '@/study/study.scss'
// Introduce child routes
const child1 = lazy(() = > import ('@/study/routerStudy/child/child1'))
const child2 = lazy(() = > import ('@/study/routerStudy/child/child2'))

class routerStudy extends React.Component{
  render() {
    return (
      <div className='panel-inner'>
        <h4>RouterStudy page</h4>
        <NavLink exact activeStyle={{color:'red'}} to={'/routerStudy/child1'} >child1 |</NavLink>
        <NavLink exact activeStyle={{color:'red'}} to={'/routerStudy/child2'} >child2</NavLink>
        <div className='child-panel'>
          <Switch>
            <Route path='/routerStudy/child1' component={child1}/>
            <Route path='/routerStudy/child2' component={child2}/>
            <Redirect from='/routerStudy' to='/routerStudy/child1'/>{/* Redirect*/}</Switch>
        </div>
      </div>)}}export default routerStudy
Copy the code

conclusion

16.16.16.16.16.16.16.16.16.16.16.16.16.16.16.3

takes precedence over

So don’t use both attributes in the same


2, inreact-router-configIn-plug-in use

If the project uses react-router-config, we can configure the redirection while configuring the data

Routing arrayrouter.js

RouterStudy => /routerStudy/child1

import {lazy} from 'react'
import {Redirect} from 'react-router-dom'

const Home = lazy(() = > import ('.. /App'))
const routerStudy = lazy(() = > import ('@/study/routerStudy/routerStudy'))
  / / zi lu by
  const child1 = lazy(() = > import ('@/study/routerStudy/child/child1'))
  const child2 = lazy(() = > import ('@/study/routerStudy/child/child2'))


// Write the basic routing route, path is the path, component is the corresponding render component, exact attribute determines the exact match
const routes = [
  // Outer redirection
  {
    path: "/home".name: 'Home'.component: Home,
    exact: true}, {path: "/".name: 'HomeRedirect'.exact: true.render(){
      return  <Redirect to="/home" />}},// Route nested redirection
  {
    path: "/routerStudy".component: routerStudy,
    name: 'Route learning'.children: [{path: "/routerStudy".//component: routerStudy,
        name: 'Route learning'.exact: true.render(){
          return  <Redirect to="/routerStudy/child1" />}, {},path: "/routerStudy/child1".component: child1,
        name: Sons' 1 '}, {path: "/routerStudy/child2".component: child2,
        name: Sons' 2 ',},]},];// Export the routing table array
export default routes
Copy the code

routerStudy.js

import React from 'react'
import {renderRoutes} from 'react-router-config'
import {NavLink} from "react-router-dom"
import '@/study/study.scss'
class routerStudy extends React.Component{
  render() {
    console.log(this.props)
    return (
      <div className='panel-inner'>
        <h4>RouterStudy page</h4>
        <NavLink exact activeStyle={{color:'red'}} to={'/routerStudy/child1'} >child1 |</NavLink>
        <NavLink exact activeStyle={{color:'red'}} to={'/routerStudy/child2'} >child2</NavLink>
        <div className='child-panel'>
          {renderRoutes(this.props.route.children, { someProp: "these extra props are optional" })}
        </div>
      </div>)}}export default routerStudy
Copy the code