前端路由（五）-重定向——Redirect组件必须包裹在Switch组件中 & 根路径 -需添加exact属性-路径进行精确匹配，不会存在包含关系

重定向——Redirect组件必须包裹在Switch组件中 & /-根路径 -需添加exact属性-路径进行精确匹配，不会存在包含关系

• 在JSX中可以直接使用重定向组件实现跳转

function Login() {
  let flag = false;
  // 如果页面中渲染<Redirect to='/tologin'/> 那么就会重定向到to指定位置
  let info = flag? <div>主页信息</div> : <Redirect to='/tologin'/>;
  return info;
}

• 配置路由映射时，如果匹配到特定路由就进行跳转

<Switch>
  <Route path='/home' component={Home}/>
  <Redirect from='/abc' to='tech'/>
</Switch>

实例

第一步：安装依赖包

npm install react-router-dom -D

第二步：在APP.js同层级的component下新建router文件夹，其下新建文件04-路由重定向.js

第三步：在App.js中进行导入

import React from 'react';
import BaseRouter from './component/router/04-路由重定向'

function App () {
  return (
    <div>
      <BaseRouter/>
    </div>
  )
}

export default App;

component/router/04-路由重定向.js文件如下

/*
  路由重定向

  在模板中可以动态渲染Redirect标签，他的作业是实现跳转
*/

import React from 'react'
import { BrowserRouter, Route, Link, Switch, Redirect } from 'react-router-dom'

function Home () {
  /*
    只有登录成功后才可以访问页面内容
    如何判断是否登录？
  */
  let token = sessionStorage.getItem('mytoken')
  let content = null
  if (token) {
    // 登录成功，正常显示页面内容
    content = <div>Home</div>
  } else {
    // 没有登录，重定向到登录页
    content = <Redirect to='/login'/>
  }
  return (
    <div>
      {content}
    </div>
  )
}
function Tech () {
  return <div>Tech</div>
}
function Edu () {
  return <div>Edu</div>
}
function Login () {
  return <div>Login</div>
}

class BaseRouter extends React.Component {
  render () {
    return (
      <BrowserRouter>
        <div>
          <div>基础路由</div>
          <hr/>
          {/*路由链接*/}
          <Link to='/home'>主页</Link>
          <Link to='/tech'>科技</Link>
          <Link to='/edu'>教育</Link>
          <Link to='/test'>test</Link>
          {/*路由组件显示的位置*/}
          <Switch>
            {/*Redirect组件必须包裹在Switch组件中*/}
            <Redirect from='/' exact to='/home'/>
            <Route path='/login' component={Login}/>
            <Route path='/home' component={Home}/>
            <Route path='/tech' component={Tech}/>
            <Route path='/edu' component={Edu}/>
            <Redirect from='/test' exact to='/home'/>
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}

export default BaseRouter

npm run start启动项目，页面如下：

第一种方式：未登录重定向

04-路由重定向.js

function Home () {
  /*
    只有登录成功后才可以访问页面内容
    如何判断是否登录？
  */
  // 1、没有登录
   let token = sessionStorage.getItem('mytoken')
   // 2、登录
  // let token = sessionStorage.getItem('mytoken') || {}
  let content = null
  if (token) {
    // 登录成功，正常显示页面内容
    content = <div>Home</div>
  } else {
    // 没有登录，重定向到登录页
    content = <Redirect to='/login'/>
  }
  return (
    <div>
      {content}
    </div>
  )
}

界面同上

第二种方式：登录重定向

04-路由重定向.js

function Home () {
  /*
    只有登录成功后才可以访问页面内容
    如何判断是否登录？
  */
  // 1、没有登录
  // let token = sessionStorage.getItem('mytoken')
   // 2、登录
   let token = sessionStorage.getItem('mytoken') || {}
  let content = null
  if (token) {
    // 登录成功，正常显示页面内容
    content = <div>Home</div>
  } else {
    // 没有登录，重定向到登录页
    content = <Redirect to='/login'/>
  }
  return (
    <div>
      {content}
    </div>
  )
}

界面