react路由重定向Redirect使用

需求

进入/routerStudy， 自动重定向到/routerStudy/child1

路由页面结构

1、原生版本

index.js

import React, {lazy} from 'react' //使用路由懒加载
import ReactDOM from 'react-dom'

import {NavLink, HashRouter as Router, Switch, Route, Redirect} from "react-router-dom" //BrowserRouter 是路由的History模式
import {Suspense} from 'react' //配合路由懒加载

//引入父路由 routerStudy
const routerStudy = lazy(() => import ('@/study/routerStudy/routerStudy'))

ReactDOM.render(
  <React.StrictMode>
    {/**只能有一个Router根节点  Router -S**/}
    <Router>
      <>
          <div className='nav' style={{border: 'solid 1px red', padding: '20px'}}>
            <NavLink activeStyle={{color:'red'}} to='/routerStudy'>我是LinkStudy</NavLink>
          </div>
          <Suspense fallback={<div>loading</div>}>
            <Switch>
              {/*{renderRoutes(routes)}*/}
              {/*原生路由render test*/}
              <Route path='/routerStudy'  component={routerStudy}></Route>
            </Switch>
          </Suspense>
        </>
    </Router>
    {/**只能有一个Router根节点  Router -E**/}
  </React.StrictMode>,
  document.getElementById('root')
);

复制代码

父路由routerStudy.js

import React, {lazy} from 'react'
import {NavLink, Redirect, Route, Switch} from "react-router-dom"
import '@/study/study.scss'
//引入子路由
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 页面</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
复制代码

总结

1、Redirect 需要在有子路由配置的地方使用
2、懒加载需要lazy和Suspense配合使用 参考
3、<Route component> 的优先级要比 <Route render> 高，所以不要在同一个 <Route> 中同时使用两个属性

2、在react-router-config插件内使用

如果项目中使用了react-router-config, 我们可以在配置数据的时候进行重定向配置

路由数组router.js

实现 / => /home
实现 /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'))
  //子路由
  const child1 = lazy(()=> import ('@/study/routerStudy/child/child1'))
  const child2 = lazy(()=> import ('@/study/routerStudy/child/child2'))


//编写基本的路由路线，path为路径，component为对应渲染的组件，exact属性决定是否精准匹配
const routes = [
  //外层重定向
  {
    path: "/home",
    name: 'Home',
    component: Home,
    exact: true,
  },
  {
    path: "/",
    name: 'HomeRedirect',
    exact: true,
    render(){
      return  <Redirect to="/home" />
    },
  },
  //路由嵌套重定向
  {
    path: "/routerStudy",
    component: routerStudy,
    name: '路由学习',
    children: [
      {
        path: "/routerStudy",
        //component: routerStudy,
        name: '路由学习',
        exact: true,
        render(){
          return  <Redirect to="/routerStudy/child1" />
        },
      },
      {
        path: "/routerStudy/child1",
        component: child1,
        name: '子1',
      },
      {
        path: "/routerStudy/child2",
        component: child2,
        name: '子2',
      },
    ]
  },
];

//将路由表数组导出
export default routes
复制代码

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 页面</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
复制代码