react router的使用

1.安装router

yarn add react-router-dom

2.在ts中需要安装依赖

yarn add --dev @types/react-router-dom

3.router的使用：跳转、首页及404页面

import React from 'react'
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    Redirect 
} from 'react-router-dom'
function App() {
    return (
        <Router>
            <div>
                <nav>
                    <ul>
                        <li>
                            <Link to="/tags">标签页</Link>
                        </li>
                        <li>
                            <Link to="/money">记账页</Link>
                        </li>
                        <li>
                            <Link to="/statistics">统计页</Link>
                        </li>
                    </ul>
                </nav>
                <Switch>
                    <Route path="/tags">
                        <Tags/>
                    </Route>
                    <Route path="/money">
                        <Money/>
                    </Route>
                    <Route path="/statistics">
                        <Statistics/>
                    </Route>
                    <Redirect exact from="/" to="/money"/>//首页
                    <Route path="*">
                        <NoMatch/>//404页面
                    </Route>
                </Switch>
            </div>
        </Router>
    )
}
function Statistics() {
    return <h2>统计页面</h2>
}
function Tags() {
    return <h2>标签页面</h2>
}
function Money() {
    return <h2>记账页面</h2>
}
function NoMatch() {
    return <h2>页面不存在</h2>
}
export default App

4.hash模式的router(不需要后台支持)

import { HashRouter as Router,} from 'react-router-dom'