React学习笔记(10)路由

路由配置是一组指令，用来告诉 router 如何匹配 URL以及匹配后如何执行代码。
http://react-guide.github.io/react-router-cn/docs/guides/basics/RouteConfiguration.html

1.首先需要安装yarn add react-router-dom
2.在页面引入import { BrowserRouter as Router, Route} from "react-router-dom";
实现一个最简单的路由功能，访问localhost:3000，跳转到home组件；访问localhost:3000/page，跳转到page组件。

import React from "react";
export default class Home extends React.Component {
    render() {
        return (
            <div>
                我是home组件
            </div>
        )
    }
}

import React from "react";
export default class Page extends React.Component {
    
    render() {
        return (
            <div>
                我是Page组件
            </div>
        )
    }
}

在MyRouter 组件中实现上述功能。

import React from "react";
import Page from "./page";
import Home from "./home";
//引入一些模块
import { BrowserRouter as Router, Route, NavLink} from "react-router-dom";

export default class MyRouter extends React.Component {

    render() {
        return (
            <Router>
                <div>
                 <Route exact path ="/" component = {Home}/>
                 <Route path="/page" component = {Page}/>                   
                </div>
            </Router>
        )
    }
}

• 其中<Route>是路由配置的具体实现，它指定当路径匹配的时候渲染哪一个UI。
• path是用于指定路径名的，exact和strict是匹配路径名时指定更为严格的匹配规则。
• component （最常用）当路径匹配时渲染UI，内部实现用的是React.createElement()方法，即每一次都会触发卸载和创建组件。