React学习笔记之路由

React学习笔记之路由

react中的路由和vue中的路由理念大致相似，但由于两大框架的不同，有一定差别。
就像Vue有Vue-router，react也有自己的路由实现：React-router

react-router-dom

react-router-dom是适用于浏览器环境的再次封装

安装

npm install react-router-dom --save

基本使用

BrowserRouter

要使用路由，必须将页面包裹在BrowserRouter标签中，包裹在BrowserRouter中的组件会拥有一个history属性，路由正是通过history对象实现的

Link

Link标签是封装过后的a标签，可以理解为是一个链接，给定的to属性表示要跳转到的路由

<Link  to="/about">About</Link>

Route

Route标签是路由组件组件的容器，用于匹配路由并展示相应的路由组件，path属性表示匹配的路由，component表示绑定的路由组件

<Route path="/about" component={About}></Route>

基本的路由实现如下

import React, { Component } from "react";
import { BrowserRouter, Link, Switch, Route } from "react-router-dom";
import Category from "./category";
import User from "./user";
import Article from "./article";
class Home extends Component {
    state = {};
    render() {
        return (
            <BrowserRouter>
                <div className="home">
                    <header className="header">头部</header>
                    <div className="container">
                        <nav className="left">
                            <Link to="/category">栏目管理</Link>
                            <Link to="/article">文章管理</Link>
                            <Link to="/user">用户管理</Link>
                        </nav>
                        <div className="right">
                            <Route path="/category" component={Category}></Route>
                            <Route path="/article" component={Article}></Route>
                            <Route path="/user" component={User}></Route>
                        </div>
                    </div>
                </div>
            </BrowserRouter>
        );
    }
}

export default Home;

NavLink

NavLink是一个特殊的Link，在被点击之后，默认会给NavLink追加一个active类，用于实现点击