React生态之react-router-dom、react-router

关于 react-router

4.0以上版本已经不需要路由配置,直接配置使用组件。
react-router :提供了一些router的核心Api , 包括Router、Route 、Switch 等
react-router-dom 提供了BrowserRouter、HashRouter、Route、 Link、NavLink、Router、Route 、Switch 等

• 所以WEB端直接安装react-router-dom 模块就可以了,

安装 react-router-dom

• npm 安装

  npm install react-router-dom --save

• yarn 安装

  yran add react-router-dom

配置路由模块

1. 组件页面文件结构如下,admin.js 属于主页,比如login进入的页面 。

	-src
		-admin.js
		-router.js
		-components
			-Header.js
			-Footer.js
			-NavLeft.js
		-pages
			-login
				index.js
			-page1
				-index.js
				-index.css
			-page2
				-index.js
			-page3
				-index.js
			-page4
				-index.js

2. admin.js 页面内容如下：

	import React from 'react'
	//可以使用antd的ui框架
	import { Row, Col} from 'antd';
	import Header from './components/Header'
	import Footer from './components/Footer'
	import NavLeft from './components/NavLeft'
	
	
	export default class Admin extends React.Component{
	    render(){
	        return(
	            <div className="container">
	                <Row>
	                    <Col span={4}>
	                    	//这里的内容可以直接放在NavLeft里面,作为跳转使用
	                        <div>
		                        <NavLink to="/admin/page1">go to page1</NavLink>
		                    </div>
		                    <div>
		                        <NavLink to="/admin/page2">go to page2</NavLink>
		                    </div>
		                    <div>
		                        <NavLink to="/admin/page3">go to page3</NavLink>
		                    </div>
		                    <div>
		                        <NavLink to="/admin/page4">go to page4</NavLink>
		                    </div>
	                    </Col>
	                    <Col span={20} className="main">
	                        <Header></Header>
	                        <Row className="content">
	                        	//这里就是路由配置的加载位置,由this.props.children实现
	                            {this.props.children}
	                        </Row>
	                        <Footer></Footer>
	                    </Col>
	                </Row>
	
	            </div>
	        )
	    }
	}

3. page页面内容如下

	//page1
	import React from 'react'
	import './index.css'
	export default class PageOne extends React.Component{
	    render(){
	        return(
	            <div>
	                这里是页面1
	            </div>
	        )
	    }
	}
	//page2
	import React from 'react'
	export default class PageTwo extends React.Component{
	    render(){
	        return(
	            <div>
	                这里是页面2
	            </div>
	        )
	    }
	}
	//page3
	import React from 'react'
	export default class PageThree extends React.Component{
	    render(){
	        return(
	            <div>
	                这里是页面3
	            </div>
	        )
	    }
	}
	//page4
	import React from 'react'
	export default class PageFour extends React.Component{
	    render(){
	        return(
	            <div>
	                这里是页面4
	            </div>
	        )
	    }
	}

4. router.js 这里就是最主要的路由组件配置

HashRouter 里面不能直接写 Route 必须添加一个节点比如挂载到 <App> ,因为HashRouter 内只允许有一个子节点
路由精确匹配： exact={true} 在4.0以上的版本会加载多个路由组件,比如 /admin 会同时加载到 / 和 /admin 使用参数时就不会去加载 / 模块 .用法参照下面示例
Switch 递进匹配, 一旦匹配到一个路由就不会在进行匹配。 只选择第一个匹配到的渲染 就好像Switch语句一样
<Route component={NoMatch}></Route> 找不到文件自动加载这个路由模块

	import React from 'react'
	import App from './App'
	import Admin from './admin'
	import Login from './pages/login'
	import PageOne from './pages/page1'
	import PageTwo from './pages/page2'
	import PageThree from './pages/page3'
	import PageFour from './pages/page4'
	import NoMatch from './pages/NoMatch'
	import {HashRouter, Route , Switch} from 'react-router-dom'
	
	export default class CRouter extends React.Component{
	    render(){
	        return(
	            <HashRouter>
	                <App>
	                    <Route path="/login" component={Login}></Route>
	                    <Route exact={true} path="/admin" render={()=>
	                        <Admin>
	                            <Switch>
	                                <Route path="/admin/page1" component={PageOne}></Route>
	                                <Route path="/admin/page2" component={PageTwo}></Route>
	                                <Route path="/admin/page3" component={PageThree}></Route>
	                                <Route path="/admin/page4" component={PageFour}></Route>
	                                <Route  component={NoMatch}></Route>
	                            </Switch>
	                        </Admin>
	                    }></Route>
	                    <Route  component={Login}></Route>
	                </App>
	            </HashRouter>
	        )
	    }
	}

5. App.js

	import React, { Component } from 'react';
	class App extends Component {
	  render() {
	    return (
	      <div className="App">
	      	//这里的App 其实就是路由的最外侧节点模块,里面不需要别的操作只需要用this.props.children 来加载路由的配置
	          {this.props.children}
	      </div>
	    );
	  }
	}
	export default App;

6. index.js 入口文件

	import React from 'react';
	import ReactDOM from 'react-dom';
	import './index.css';
	//引入路由组件配置就可以
	import Route from './router'
	import * as serviceWorker from './serviceWorker';
	ReactDOM.render(<Route />, document.getElementById('root'));
	serviceWorker.unregister();

使用嵌套路由,路由重定向,动态路由

Admin 组件模块就是一个嵌套路由的使用方法
<Redirect from='/admin' to='/admin/home'></Redirect> /admin重定向到 /admin/home

	import React from 'react'
	import App from './App'
	import Admin from './admin'
	import Login from './pages/login'
	import PageOne from './pages/page1'
	import PageTwo from './pages/page2'
	import PageThree from './pages/page3'
	import PageFour from './pages/page4'
	import NoMatch from './pages/NoMatch'
	import {HashRouter, Route , Switch} from 'react-router-dom'
	
	export default class CRouter extends React.Component{
	    render(){
	        return(
	            <HashRouter>
	                <App>
	                	<div>
	                		//3. Link里面设置动态路由参数值“/参数值”
	                       <NavLink to="/admin/page1/12312111">go to page1</NavLink>
	                    </div>
	                    <Route path="/login" component={Login}></Route>
	                    <Route exact={true} path="/admin" render={()=>
	                    	//1. 这里就是路由嵌套的用法,创建Admin组件。里面继续加载路由模块
	                    	//1. 上面的render箭头函数就类似于return 返回这个节点
	                        <Admin>
	                            <Switch>
	                            	//3. Route 里面设置参数名的方式 “ /:参数名 ” 	
	                                <Route path="/admin/page1/:pageId" component={PageOne}></Route>
	                                <Route path="/admin/page2" component={PageTwo}></Route>
	                                <Route path="/admin/page3" component={PageThree}></Route>
	                                <Route path="/admin/page4" component={PageFour}></Route>
	                                <Route  component={NoMatch}></Route>
	                            </Switch>
	                            //2. 路由重定向
	                            <Redirect from='/admin' to='/admin/home'></Redirect>
	                        </Admin>
	                    }></Route>
	                    <Route  component={Login}></Route>
	                </App>
	            </HashRouter>
	        )
	    }
	}
	
	//page1
	import React from 'react'
	import './index.css'
	export default class PageOne extends React.Component{
	    render(){
	        return(
	            <div>
	                //这里是页面1下面是获取参数的方式
	                {this.props.match.params.pageId} //3. 输出结果为：12312111  固定获取方法：this.props.match.params.参数名
	            </div>
	        )
	    }
	}