React-Router简单了解（下）

---

一、React-Router重定向-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里加一个配置

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、编程式重定向

• 编程式重定向就是不再利用标签，而是直接使用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;
  

• 这个时候就完成了路由的简单嵌套

---