react 路由基本用法

react 路由基本用法

前言 : 假设你有react基础
试着记住 以下概念 :

1. HashRoter 定义哈希路由整体的容器标签
2. Link 单个标签，定义路由的链接，通过“to”属性来定义链接地址
3. Route 单个标签，定义组件的容器标签，通过“path”定义和Link的to属性对应的地址，component属性定义链接对应的组件
4. Switch 多个Route标签外面的容器标签，如果需要定义404跳转和重定向跳转，需要用此标签包裹Route标签
5. Redirect 定义路由重定向，通过“from”属性定义原始路由，通过“to”属性定义重定向路由

yarn add react-router-dom            // 安装路由模块

直接看实例 :

import ReactDOM from 'react-dom';
import React, { Component } from 'react';
// 1. 在代码中导入对应的依赖
import { HashRouter, Route, Link, Redirect, Switch } from 'react-router-dom'

function Page01() {
    return <h1>我是页面1</h1>
}
function Page02() {
    return <h1>我是页面2</h1>
}
function Page03() {
    return <h1>我是页面3</h1>
}
function NotFound() {
    return <h1>亲 , 你要的页面未找到</h1>
}
// 定义组件
class App extends Component {
    render() {
        return (
            // 2. 使用路由
            <HashRouter>
                <Link to="/">页面1</Link>
                <Link to="/page02">页面2</Link>
                <Link to="/page03">页面3</Link>
                {/* 
                路由默认是模糊匹配, 只要是有/都会显示在页面上,  exact 是严格匹配 
                Switch 把<Route /> 包括起来 , 不会出错
                */}
                <Switch>
                    <Route path="/page01" component={Page01}></Route>
                    <Route path="/page02" component={Page02}></Route>
                    <Route path="/page03" component={Page03}></Route>
                    {/* 定义路由重定向,要定义到整个路由表倒数第二的位置 */}
                    <Redirect exact from="/" to="/page01"></Redirect>
                    {/* 定义页面未找到404, 要定义到整个路由列表最后的位置 */}
                    <Route component={ NotFound } />
                </Switch>
            </HashRouter>
        )
    }
}
// 使用组件
ReactDOM.render(<App />, document.getElementById('root'));