番茄闹钟二(引入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这个入口文件

最后,个人微信,欢迎交流！