学习React路由的第二天,版本5的传值、重定向和嵌套（Day:12）

[XJQ124]

1、学习Router5的内容

目前掌握了动态传值，重定向和嵌套路由

---

1、第一个demo 动态传值和重定向

这是我的AppRouter.js

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

function AppRouter(){
    return (
        <Router>
            <ul>
                <li><Link to = '/'>首页</Link></li>
                <li><Link to='/list/123'>列表</Link></li>
            </ul>
           {/* exact是精确匹配的意思 */}
            <Route path="/" exact component = {Index} />
            <Route path="/list/:id" component={List} />
            <Route path="/home/" component={Home} />

        </Router>
    )
}
export default AppRouter

这里是进行首页路由的设置

index.js

import React,{Component} from "react";
import { Link, Redirect } from "react-router-dom";
class Index extends Component{
    constructor(props){
        super(props);
        this.state = {
            list:[
                {cid:123,title:'金桥信息-1'},
                {cid:456,title:'金桥信息-2'},
                {cid:789,title:'金桥信息-3'},
            ]
        }
        this.props.history.push("/home/")
    }
    render(){
        return (
            <>
            {/* 标签式重定向 */}
            {/* <Redirect to= '/Home/' /> */}
        <h2>XXX</h2>
        <ul>
            {
                this.state.list.map((item,index)=>{
                    return (
                        <li key = {index}>
                            <Link to={'/list/' + item.cid}>{item.title}</Link></li>
                    )
                })
            }
        </ul>
            </>
        );
    }
}
export default Index;

Home.js

import React, { Component } from 'react';
class Home extends Component {
    constructor(props){
        super(props);
        this.state= {}
    }
    render() { 
        return (<h2>我是Home组件--Redirect</h2>)
    }
}

export default Home;h

List.js

import React, { Component } from "react";
class List extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return (<h2>List-page是{this.state.id}</h2>);
    }
    componentDidMount(){
        console.log(this.props)
        let temId = this.props.match.params.id
        this.setState({id:temId})
    }
}
export default List;

后面是设计到传值和重定向，我这个是看个功能糅合在一起的，所以现在不能把功能单独呈现出来

2、嵌套路由

这个地方，我已经完全弄明白了 先看我的顶层，这是总的路由

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

function AppRouter(){
    return (
        <Router>
            <div className="mainDiv">
                <div className="leftNav">
                    <h3>一级导航</h3>
                    <ul>
                        <li><Link to = '/'>博客首页</Link></li>
                        <li><Link to='/video'>视频教程</Link></li>
                        <li><Link to='./workplace'>职场技能</Link></li>
                    </ul>
                </div>
                <div className="rightMain">
                    <Route path="/" exact component = {Index} />
                    <Route path="/video" component={Video} />
                    <Route path="/workplace" component={Workplace} />
                </div>

            </div>
        </Router>
    )
}
export default AppRouter
···

然后是两个第二层的路由,一个是workplace，一个是Video.js

```js
import React from "react";
import { Route, Link } from "react-router-dom";
import Money from "./workplace/Money";
import Getup from "./workplace/Getup";
function WorkPlace() {
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/workplace/money">程序员加薪秘籍</Link></li>
                    <li><Link to="/workplace/getup">程序员早起攻略</Link></li>
                </ul>
            </div>
            <div className="videoContent">
                <div><h3>职场软技能</h3></div>
                <Route path="/workplace/money/" component={Money} />
                <Route path="/workplace/getup/" component={Getup} />

            </div>
        </div>
    )
}
export default WorkPlace

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

function Video(){
    return(
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to= "/video/reactpage">React教程</Link></li>
                    <li><Link to="/video/flutter">fluttert教程</Link></li>
                    <li><Link to="/video/vue">vue教程</Link></li>                    
                </ul>
            </div>
            <div className="videoContent">
                <div><h3>视频教程</h3></div>
                <Route path="/video/reactpage/" component= {ReactPage} />
                <Route path="/video/flutter/" component={Flutter} />
                <Route path="/video/vue/" component={Vue} />
            </div>
        </div>
    )
}
export default Video

然后是他们内部的内容

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

这里只展示了一个，因为一共有五个，我就不一样贴出来了。

最后的结果截图如下: