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
文章目录
-
- 1. demo1-基础使用
- 2. demo2-嵌套标签组件
- 3. demo3-在子组件中进行嵌套路由
- 4. demo4-测试动态路由功能
- 5. demo4-NoMatch组件
+ "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/>
{/*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允许在路由中嵌套标签组件 这里是嵌套组件
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允许在路由中嵌套标签组件 这里是嵌套组件
/* 嵌套路由中添加 render方法加载
在子组件中进行嵌套路由
*/
export default class IRouter extends React.Component {
render() {
return (
<Router>
<Home>
<Route
path="/main"
render={() =>
<Main>
{/* this is a subchild element */}
<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 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>
{/* this is a subchild element */}
<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页
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 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页
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页
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>
{/* this is a subchild element */}
<Route path="/main/:value" component={Info} />
</Main>
)}
/>
<Route path="/about" component={About} />
<Route path="/topics" component={Topic} />
<Route component={NoMatch} />
{/*
*/}
</Switch>
</Home>
</Router>
);
}
}