小白文章之---React框架学习(五)

React 路由

什么是路由？我们访问一个 URL，最终定向到哪个资源，这部分工作的处理程序，就是路由

1、安装依赖库
通过指令"npm install react-router-dom"安装依赖库(API文档)
2、导入路由实现库
import {BrowserRouter as Router, Route, Link} from “react-router-dom”
3、通过点击标签去找到标签对应的地址，在通过配置的映射，去获取地址对应的组件所要呈现的内容
示例：

//导包
import React, {Component} from "react";
import {BrowserRouter as Router, Route, Link} from "react-router-dom";

/**
 * 测试界面的组件
 */
class About extends Component {
    render() {
        return (<div>我是关于</div>);
    }
}
class Home extends Component {
    render() {
        return (<div>我是首页</div>);
    }
}

//定义路由容器
export default class Nav extends Component {
    render() {
        return (<Router>
            {/*编写Link*/}
            <div>
                {/* to是跳转的地址，Home和About在界面中呈现的是标签，通过点击它去找到映射的地址 */}
                <Link to="/">Home</Link>&emsp;&emsp;&emsp;
                <Link to="/about">About</Link>&emsp;&emsp;&emsp;
                <hr/>
                {/* 配置路径和组件映射 */}
                {/*path地址的映射，component对应的事件组件*/}
                <Route exact path="/" component={Home}/>
                <Route exact path="/about" component={About}/>
            </div>
        </Router>)
    }
}

4、增加二级路由的代码

class Topic extends Component {
    render() {
        return (
            <div>
                {this.props.match.params.topicId}
            </div>);
    }
}

class Topics extends Component {
    render() {
        return (
            <div>
                <h2>标题栏</h2>
                <ul>
                    <li><Link to={`${this.props.match.url}/topic1`}>第一</Link></li>&emsp;&emsp;
                    <li><Link to={`${this.props.match.url}/topic2`}>第二</Link></li>&emsp;&emsp;
                    <li><Link to={`${this.props.match.url}/topic3`}>第三</Link></li>&emsp;&emsp;
                </ul>
                <Route path={`${this.props.match.path}/:topicId`} component={Topic}/>
                <Route exact path={this.props.match.path} render={() => <div>请选择一个标题</div>}/>
            </div>
        );
    }
}