番茄鬧鐘二(引入react-router)

1. 安裝 react-router

yarn add react-router-dom
yarn add @types/react-router-dom // 引入聲明類型文件

2. 引入 react-router

    import React from 'react'
    import './App.css'


    import {BrowserRouter as Router, Switch, Route, Link, useRouteMatch, useParams} from 'react-router-dom'


    function Home() {
      return <h2>Home</h2>
    }

    function About() {
      return <h2>About</h2>
    }

    function Topics() {
      let match = useRouteMatch()

      return (
        <div>
          <h2>Topics</h2>

          <ul>
            <li>
              <Link to={`${match.url}/components`}>Components</Link>
            </li>
            <li>
              <Link to={`${match.url}/props-v-state`}>
                Props v. State
              </Link>
            </li>
          </ul>

          {/* The Topics page has its own <Switch> with more routes
              that build on the /topics URL path. You can think of the
              2nd <Route> here as an "index" page for all topics, or
              the page that is shown when no topic is selected */}
          <Switch>
            <Route path={`${match.path}/:topicId`}>
              <Topic/>
            </Route>
            <Route path={match.path}>
              <h3>Please select a topic.</h3>
            </Route>
          </Switch>
        </div>
      )
    }

    function Topic() {
      let {topicId} = useParams()
      return <h3>Requested topic ID: {topicId}</h3>
    }

    export default function App() {
      return (
        <Router>
          <div>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
              <li>
                <Link to="/topics">Topics</Link>
              </li>
            </ul>

            <Switch>
              <Route path="/about">
                <About/>
              </Route>
              <Route path="/topics">
                <Topics/>
              </Route>
              <Route path="/">
                <Home/>
              </Route>
            </Switch>
          </div>
        </Router>
      )
    }

3. 路由的基本引入

  // App.tsx
  import React from 'react'
  import './App.css'
  import {BrowserRouter as Router, Route} from 'react-router-dom'
  import Login from "./components/Login/Login"
  import SignUp from "./components/SignUp/SignUp"
  import Index from './components/Index/Index'

  class Component extends React.Component  {
    public render(){
      return (
        <Router>
          <div>
            <Route exact={true} path="/" component={Index}/>
            <Route path="/login" component={Login} />
            <Route path="/signUp" component={SignUp} />
          </div>
        </Router>
      )
    }
  }
  export default Component

  // index.tsx
  import * as React from 'react';

  class Component extends React.Component {
    public render() {
      return (
        <div className="Component">
          Index
        </div>
      )
    }
  }

  export default Component

4. Index 頁面跳轉到登錄頁面

import * as React from 'react';
import { Button } from 'antd';

interface Irouter {
  history: any
}

// router 給 Index 傳 props 屬性, 要聲明 props 的類型,也可以直接聲明一個接口
class Component extends React.Component<Irouter> {

  login = ()=>{
    this.props.history.push('/login')
  }

  render() {
    return (
      <div className="Component">
      <Button onClick={this.login}>登錄</Button>
      </div>
    )
  }
}

export default Component

5. withRouter 的用法

• index 是直接通過 Router 組件傳過來的值，所以會帶有 props.history,如果不是通過 Router 渲染出來的路由,也想知道當前的路由信息，那麼必須要用到 withRouter 的組件，

6. BrowserRouter 和 HashRouter 的區別

# 後面相當於就是個 hash

browser 的壞處是，如果用 BrowerRouter,部署到服務器上輸入
http://localhost:3000/login可能會找不到,只能找到http://localhost:3000/,
因爲這個是個單頁面應用，單頁應用只是映射到 index 上面，login 的話可能會返回 404,如果使用 browserrouter,
必須要配置服務器把http://localhost:3000/下的所有路徑指向index這個入口文件

最後,個人微信,歡迎交流！