前端路由（五）-重定向——Redirect元件必須包裹在Switch元件中 & 根路徑 -需新增exact屬性-路徑進行精確匹配，不會存在包含關係

阿新 • • 發佈：2021-02-16

重定向——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>
  )
}