react-router-dom4 学习进阶---react-router4五种写法

v4-v5: https://v5.reactrouter.com/web/example/no-match

v6:https://reactrouter.com/en/main
https://github.com/DudeYouth/react-route-dom-test

https://github.com/supasate/connected-react-router/blob/master/FAQ.md#how-to-migrate-from-v4-to-v5

https://github.com/dL-hx/imoocmanagerhttps://github.com/dL-hx/imoocmanager

+     "react-router-dom": "^4.3.1",

1. demo1-基础使用

src\pages\route_demo\router1\About.js

import React from 'react'

export default class About extends React.Component {
  render() {
    return (
      <div>
        this is About page.
      </div>
    );
  }
}

src\pages\route_demo\router1\Main.js

import React from 'react'

export default class Main extends React.Component {
    render() {
        return (
            <div>
                this is Main page.
            </div>
        );
    }
}

src\pages\route_demo\router1\Topic.js

import React from 'react'

export default class Topic extends React.Component {
    render() {
        return (
            <div>
                this is Topic page.
            </div>
        );
    }
}

src\pages\route_demo\router1\Home.js

import React from 'react'
import {HashRouter, Route, Link, Switch} from "react-router-dom";//引入路由
import About from "./About";
import Topic from "./Topic";
import Main from "./Main";

export default class Home extends React.Component {//默认输出 对象{}
    render() {
        return (
            <HashRouter>
                <div>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/about">About</Link>
                        </li>
                        <li>
                            <Link to="/topics">Topics</Link>
                        </li>
                    </ul>
                    <hr/>
                    {/*<Route exact={true} path='/' component={Main}></Route>*/}
                    <Switch>
                        <Route exact={true} path='/' component={Main}/>
                        <Route path='/about' component={About}/>
                        <Route path='/topics' component={Topic}/>
                    </Switch>
                </div>
            </HashRouter>
        );
    }
}

2. demo2-嵌套标签组件

src\pages\route_demo\router2\Home.js

import React from "react";
import { Link } from "react-router-dom"; //引入路由


export default class Home extends React.Component {
  //默认输出 对象{}
  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to="/">Home1</Link>
          </li>
          <li>
            <Link to="/about">About1</Link>
          </li>
          <li>
            <Link to="/topics">Topics1</Link>
          </li>
        </ul>
        <hr />
        {this.props.children}
      </div>
    );
  }
}

src\pages\route_demo\router2\router.js

import React from "react";
import { HashRouter as Router, Route } from "react-router-dom"; //导入路由,为HashRouter起别名:  Router
import About from "./../router1/About";
import Topic from "./../router1/Topic";
import Main from "./../router1/Main";
import Home from "./Home";     //4.0允许在路由中嵌套标签组件    这里是嵌套<Home>组件

export default class IRouter extends React.Component {
  render() {
    return (
      <Router>
        <Home>
          <Route exact={true} path="/" component={Main} />
          <Route path="/about" component={About} />
          <Route path="/topics" component={Topic} />
        </Home>
      </Router>
    );
  }
}

3. demo3-在子组件中进行嵌套路由

src\pages\route_demo\router3\Home.js

import React from "react";
import { Link } from "react-router-dom"; //引入路由


export default class Home extends React.Component {
  //默认输出 对象{}
  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to="/main">Home1</Link>
          </li>
          <li>
            <Link to="/about">About1</Link>
          </li>
          <li>
            <Link to="/topics">Topics1</Link>
          </li>
        </ul>
        <hr />
        {this.props.children}
      </div>
    );
  }
}

src\pages\route_demo\router3\Main.js

import React from 'react'
import {Link} from 'react-router-dom'
export default class Main extends React.Component {
    render() {
        return (
            <div>
                this is Main page.
                <Link to = "/main/a">嵌套路由</Link>
                <hr/>
                {this.props.children}
            </div>
        );
    }
}

src\pages\route_demo\router3\router.js

import React from "react";
import { HashRouter as Router, Route } from "react-router-dom"; //导入路由,为HashRouter起别名:  Router
import About from "./../router1/About";
import Topic from "./../router1/Topic";
import Main from "./Main";
import Home from "./Home"; //4.0允许在路由中嵌套标签组件    这里是嵌套<Home>组件
/* 嵌套路由中添加 render方法加载
    在子组件中进行嵌套路由 
*/
export default class IRouter extends React.Component {
  render() {
    return (
      <Router>
        <Home>
          <Route
            path="/main"
            render={() => 
              <Main>
                {/* <div>this is a subchild element</div> */}
                <Route path="/main/a" component={About} />
              </Main>
            }
          />
          <Route path="/about" component={About} />
          <Route path="/topics" component={Topic} />
        </Home>
      </Router>
    );
  }
}

4. demo4-测试动态路由功能

src\pages\route_demo\router4\Home.js

import React from "react";
import { Link } from "react-router-dom"; //引入路由


export default class Home extends React.Component {
  //默认输出 对象{}
  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to="/main">Home1</Link>
          </li>
          <li>
            <Link to="/about">About1</Link>
          </li>
          <li>
            <Link to="/topics">Topics1</Link>
          </li>
        </ul>
        <hr />
        {this.props.children}
      </div>
    );
  }
}

src\pages\route_demo\router4\info.js

import React from 'react'
/* 
{this.props.match.params.xxx}
xxx:是:后面的value      <Route path="/main/:value" component={Info} />
此处写作: {this.props.match.params.value}
*/
export default class Info extends React.Component {
    render() {
        return (
            <div>
                这里是测试动态路由功能
                动态路由的值是: {this.props.match.params.value}
            </div>
        );
    }
}

src\pages\route_demo\router4\Main.js

import React from 'react'
import {Link} from 'react-router-dom'
export default class Main extends React.Component {
    render() {
        return (
            <div>
                this is Main page.
                <br/>
                <Link to = "/main/test-id">嵌套路由1</Link>
                <br/>
                <Link to = "/main/456">嵌套路由2</Link>
                <br/>
                <hr/>
                {this.props.children}
            </div>
        );
    }
}

src\pages\route_demo\router4\router.js

import React from "react";
import { HashRouter as Router, Route } from "react-router-dom"; 
import Info from "./info";
import Topic from "./../router1/Topic";
import About from "./../router1/About";
import Main from "./Main";
import Home from "./Home"; 

export default class IRouter extends React.Component {
  render() {
    return (
      <Router>
        <Home>
          <Route
            path="/main"
            render={() => 
              <Main>
                {/* <div>this is a subchild element</div> */}
                <Route path="/main/:value" component={Info} />
              </Main>
            }
          />
          <Route path="/about" component={About} />
          <Route path="/topics" component={Topic} />

        </Home>
      </Router>
    );
  }
}

5. demo4-NoMatch组件

src\pages\route_demo\router5\Home.js

import React from "react";
import { Link } from "react-router-dom"; //引入路由

/* 1.添加不存在的路由 imooc  
  2.配置404页 
          <Route component={NoMatch}/>
 3. 定义NoMatch(组件)    即404页
 4.在路由中导入  NoMatch组件
---------------
定义NoMatch(组件)    即404页
*/
export default class Home extends React.Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to="/main">Home1</Link>
          </li>
          <li>
            <Link to="/about">About1</Link>
          </li>
          <li>
            <Link to="/topics">Topics1</Link>
          </li>
          <li>
            <Link to="/imooc1">Imooc</Link>
          </li>
          <li>
            <Link to="/imooc2">Imooc</Link>
          </li>
        </ul>
        <hr />
        {this.props.children}
      </div>
    );
  }
}

src\pages\route_demo\router5\info.js

import React from 'react'
/* 
{this.props.match.params.xxx}
xxx:是:后面的value      <Route path="/main/:value" component={Info} />
此处写作: {this.props.match.params.value}
*/
export default class Info extends React.Component {
    render() {
        return (
            <div>
                这里是测试动态路由功能
                动态路由的值是: {this.props.match.params.value}
            </div>
        );
    }
}

src\pages\route_demo\router5\Main.js

import React from 'react'
import {Link} from 'react-router-dom'
export default class Main extends React.Component {
    render() {
        return (
            <div>
                this is Main page.
                <br/>
                <Link to = "/main/test-id">嵌套路由1</Link>
                <br/>
                <Link to = "/main/456">嵌套路由2</Link>
                <br/>
                <hr/>
                {this.props.children}
            </div>
        );
    }
}

src\pages\route_demo\router5\NoMatch.js

import React from "react";

/* 1.添加不存在的路由 imooc  
  2.配置404页 
          <Route component={NoMatch}/>
 3. 定义NoMatch(组件)    即404页
 4.在路由中导入  NoMatch组件
---------------
定义NoMatch(组件)    即404页
*/
export default class Home extends React.Component {
  render() {
    return (
      <div>
        404 No Pages.
      </div>
    );
  }
}

src\pages\route_demo\router5\router.js

import React from "react";
import { HashRouter as Router, Route ,Switch} from "react-router-dom";
import Info from "./info";
import Topic from "./../router1/Topic";
import About from "./../router1/About";
import Main from "./Main";
import Home from "./Home";
import NoMatch from "./NoMatch";
/* 1.添加不存在的路由 imooc  
  2.配置404页 
          <Route component={NoMatch}/>
 3. 定义NoMatch(组件)    即404页
 4.在路由中导入  NoMatch组件
  + import NoMatch from "./NoMatch"; 

5.添加Switch防止出现多个页面
+ import { HashRouter as Router, Route ,Switch} from "react-router-dom";
---------------
定义NoMatch(组件)    即404页
*/
export default class IRouter extends React.Component {
  render() {
    return (
      <Router>
        <Home>
          <Switch>
            <Route
              path="/main"
              render={() => (
                <Main>
                  {/* <div>this is a subchild element</div> */}
                  <Route path="/main/:value" component={Info} />
                </Main>
              )}
            />
            <Route path="/about" component={About} />
            <Route path="/topics" component={Topic} />

            <Route component={NoMatch} />
            {/*
			<Route path="*">
              <NoMatch />
            </Route>
			*/}
          </Switch>
        </Home>
      </Router>
    );
  }
}