React路由学习实践：react-router-dom库

react-router-dom 官方文档地址:https://reacttraining.com/react-router/web/guides/quick-start

react-router-dom 和 react-router-dom 的关系

react-router 实现了路由核心功能

react-router-dom基于react-router加入了 浏览器环境下的特性，react-router-dom 提供了Link组件用于渲染a标签、BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由。

还有一个react-router-native库，这个是用于react--native环境下的。

我们只需引入react-router-dom库即可，react-router-dom库依赖了react-router。

npm install --save react-router-dom

路由实践-制作一个简单应用

页面规划:

一级页面 ：主界面、登录页、注册页、错误提示页

在主界面中再划分二级页面，以实现系统具体的功能

点击主界面顶部的菜单实现二级页面的切换。

制作页面组件,例如 登录页面:

import React from "react";
import '../../style/login.scss';

export default class Login extends React.Component {

    jump() {
        this.props.history.push('/')
    }

    register() {
        window.alert("暂无注册功能");
    }

    render() {
        return (
            <div className="login_wrapper">
                <div className="block"><h3>欢迎来到登录界面</h3>


                    <div className="form">

                        <label htmlFor="account">账号：</label><input id="account" type="text" value="demo"
                                                                   placeholder="用户名"/>
                        <label htmlFor="password">密码：</label><input id="password" type="password" value="demo"
                                                                    placeholder="密码"/>
                        <div className="button_group">
                            <button onClick={() => {
                                this.jump();
                            }}>登录
                            </button>
                            <button onClick={() => {
                                this.register();
                            }}>注册
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

}

新建一个路由模块router.js

从react-router-dom导入HashRouter/BrowserRouter 、Redirect、Route、Switch

导入要加入路由的 页面组件

具体写法如下：

import React from 'react'

import {HashRouter, Redirect, Route, Switch} from 'react-router-dom';


import Main from "../pages/main";//主界面
import Home from "../pages/home";//首页页面
import List from "../pages/goods/list";//商品列表页
import UserCenter from '../pages/auth/user-center'//用户中心界面
import About from "../pages/about";//关于页面
import Login from '../pages/auth/login'//登录页面



const R = () => (
    <HashRouter>
        <Switch>
            <Route path="/login" component={Login}/>
            <Route path="/not-found" component={NotFound}/>
            <Route path="/" component={Main}/>
        </Switch>
    </HashRouter>
);

export default R;

然后在脚手架入口文件index.js中导入并使用路由组件:

import Router from './router/index';

ReactDOM.render(<Router/>, document.getElementById('root'));

History模式和Hash模式

使用<HashRouter>组件就是利用hashchange事件实现路由切换（hash模式）

使用<BrowserRouter>组件就是利用popState事件实现路由切换（history模式）

Switch组件

用于渲染与路径匹配的第一个子 <Route> 或 <Redirect>。

<Switch> 只会渲染一个路由。相反，仅仅定义一系列 <Route> 时，每一个与路径匹配的 <Route>都将包含在渲染范围内。

所有 <Switch>的子元素都应该是 <Route> 或 <Redirect>。只有第一个匹配当前路径的子元素将被呈现。

路由嵌套

根据页面规划，一级页面只有主界面页、登录页、注册页、错误提示页。系统的具体功能要在主界面页面实现，因此主界面下应该嵌套二级路由
将router.js 中的:<Route path="/" component={Main}/> 改为:

   <Route path="/" render={() =>
                <Main>
                    <Route exact path="/" component={Home}/>
                    <Route exact path="/list" component={List}/>
                    <Route exact path="/about" component={About}/>
                    <Route exact path="/user-center" component={UserCenter}/>
                </Main>
            }/>

<Main> 标签里既是子路由

Main组件main.js的代码如下:

import React from "react";
import '../style/main.scss';
import {withRouter,Link} from 'react-router-dom'
 class Main extends React.Component{


    render() {
        return (
            <div className="main_wrapper">
                <div className="menu">
                    <h1>react-router-dom实践</h1>
                    <Link to="/">首页</Link>
                    <Link to="/list">商品列表</Link>
                    <Link to="/about">关于</Link>
                    <Link to="/user-center">个人中心</Link>
                    <Link to="/login">登录</Link>
                </div>
                <div id="body">
                    {this.props.children}
                </div>
            </div>
        );
    }

}

export default withRouter(Main)

上方的 this.props.children 既是 渲染子页面地方

暴露出去时, 使用withRouter函数包装组件，这样react-router的三个对象history, location, match就会被放进这个组件的props属性中。

在线Demo:http://demo.crazyming.com/react-router-dom-demo/

参考文章:https://segmentfault.com/a/1190000014294604

未完待续...