React-Router簡單瞭解（下）

---

一、React-Router重定向-Redirect使用

• 標籤式重定向:就是利用<Redirect>標籤來進行重定向，業務邏輯不復雜時候可以使用這種。
• 編程式重定向:這種是利用編程的方式，一般用於業務邏輯當中，比如登錄成功挑戰到會員中心頁面。
• 重定向和跳轉有一個重要的區別，就是跳轉式可以用瀏覽器的回退按鈕返回上一級的，而重定向是不可以的。

1、標籤重定向

• 這個一般用在不是很複雜的業務邏輯中，比如進入Index組件，然後Index組件,直接重定向到Home組件。
• 建立一個 Home.js組件

import React, { Component } from 'react';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>我是 Home 頁面</h2> );
    }
}

export default Home;

• 有了組件後可以配置一下路由規則，也就是在AppRouter.js里加一個<Route>配置

import Home from './Pages/Home'
<Route path="/home/" component={Home} />

• 之後打開Index.js文件，從Index組件重新定向到Home組件，需要先引入Redirect

import { Link , Redirect } from "react-router-dom";

• 引入Redirect後，直接在render函數裏使用就可以了

<Redirect to="/home/" />

2、編程式重定向

• 編程式重定向就是不再利用<Redirect/>標籤，而是直接使用JS的語法實現重定向。
• 一般用在業務邏輯比較發雜的場合或者需要多次判斷的場合。
• 直接在構造函數constructor中加入下面的重定向代碼

 this.props.history.push("/home/");  
 

• 就可以順利實現跳轉，這樣看起來和上面的過程是一樣的

---

二、嵌套路由

• 建立AppRouter.js

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
import './index.css'

function AppRouter() {
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一級導航</h3>
                <ul>
                    <li> <Link to="/">博客首頁</Link> </li>
                    <li><Link to="">我是視頻</Link> </li>
                    <li><Link to="">我是技能</Link> </li>
                </ul>
            </div>

            <div className="rightMain">
                <Route path="/"  exact component={Index} />
            </div>
          </div>
      </Router>
    );
  }

export default AppRouter;

• index.js引入AppRouter，並進行Render渲染。

import React from 'react'
import ReactDOM from 'react-dom'
import AppRouter from './AppRouter'


ReactDOM.render(<AppRouter />, document.getElementById('root'));

• 在/src/Pages/video下面建立三個子文件，分別是ReactPage.js,Flutter.js和Vue.js，也代表着不同的視頻頁面

• ReactPage.js組件

import React from "react";
function Reactpage(){
    return (<h2>我是React頁面</h2>)
}
export default Reactpage;

• Python.js組件

import React from "react";
function Python(){
    return (<h2>我是Python頁面</h2>)
}
export default Python;

• Vue.js組件

import React from "react";
function Vue(){
    return (<h2>我是Vue頁面</h2>)
}
export default Vue;

• 編寫video.js，這個頁面就是二級導航

import React from "react";
import {  Route, Link  } from "react-router-dom";
import Reactpage from './video/ReactPage'
import Vue from './video/Vue'
import Python from './video/Python'


function Video(){
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/video/reactpage">React</Link></li>
                    <li><Link to="/video/vue">Vue</Link></li>
                    <li><Link to="/video/python">python教程</Link></li>
                </ul>
            </div>
            <div className="videoContent">
                <div><h3>編程</h3></div>
                <Route path="/video/reactpage/"   component={Reactpage} />
                <Route path="/video/vue/"   component={Vue} />
                <Route path="/video/python/"   component={Python} />
            </div>
        </div>
    )
}
export default Video;

• Video組件製作完成後，可以把它引入到AppRouter.js文件中，然後配置對應的路由

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
//--關鍵代碼------------start
import Video from './Pages/Video'
//--關鍵代碼------------end
import './index.css'

function AppRouter() {
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一級導航</h3>
                <ul>
                    <li> <Link to="/">博客首頁</Link> </li>
                    {/*--關鍵代碼------------start*/}
                    <li><Link to="/video/">視頻教程</Link> </li>
                    {/*--關鍵代碼------------end*/}
                    <li><Link to="">職場技能</Link> </li>
                </ul>
            </div>

            <div className="rightMain">
                <Route path="/"  exact component={Index} />
                 {/*--關鍵代碼------------start*/}
                <Route path="/video/"   component={Video} />
                 {/*--關鍵代碼------------end*/}
            </div>
          </div>
      </Router>
    );
  }

export default AppRouter;
  

• 這個時候就完成了路由的簡單嵌套

---