React 路由基本使用

代码示例 (有Logint和Layout组件)  

import React from 'react'
import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'
import Login from '@/pages/Login'
import Layout from '@/pages/Layout'
export default function App() {
  return (
    <Router>
      <Switch>
        <Redirect from='/' exact to='/layout'></Redirect>
        <Route path='/login' component={Login} />
        <Route path='/layout' component={Layout} />
      </Switch>
    </Router>
  )
}

官网：Declarative routing for React apps at any scale | React Router

安装 npm i react-router-dom@5.3

        react-router-dom这个包提供了三个核心的组件

import { HashRouter, Route, Link } from 'react-router-dom'

         使用HashRouter包裹整个应用，一个项目中只会有一个Router

<HashRouter>
    <div className="App">
    // … 省略页面内容
    </div>
</HashRouter>

• 使用Link指定导航链接

<Link to="/first">页面一</Link>
<Link to="/two">页面二</Link>

• 使用Route