react 路由基本用法
前言 : 假设你有react基础
试着记住 以下概念 :
- HashRoter 定义哈希路由整体的容器标签
- Link 单个标签,定义路由的链接,通过“to”属性来定义链接地址
- Route 单个标签,定义组件的容器标签,通过“path”定义和Link的to属性对应的地址,component属性定义链接对应的组件
- Switch 多个Route标签外面的容器标签,如果需要定义404跳转和重定向跳转,需要用此标签包裹Route标签
- 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'));