React Router 进行路由切换

官方链接：https://reactrouter.com/web/guides/quick-start

(这次的笔记对 React Router 写了几句简单的代码，下回有时间重新把例子补充得好看一些，并做页面展示)

一、实现路由切换

1. 概念理解

用户能够在浏览器上输入不同的 url 得到不同的页面展示，步骤如下：

1. 获取输入的 url 中 的 hash 值
2. 根据不同 hash 值选择展示不同的页面

// 进入页面
let type = window.location.hash
if(type === '#register'){
    //...
}else{
    /...
}
// 这里写逻辑
// 点击「注册」，直接把 window.location.hash 改成 #register
// 点击「登录」，直接把 window.location.hash 改成 #login

除了不同 hash 展示不同页面外，还可以改变路径

• 这种方式需要后端支持，要把所有路径都指向首页

window.location.pathname // 不直接修改这个，直接这样改变路径会刷新页面
window.history.pushState(state,title,[,url])  // 使用这种方式就不会刷新页面

// 进入页面
let type = window.location.pathName
if(type === '#register'){
    //...
}else{
    /...
}
// 这里写逻辑
// 点击「注册」，通过 window.pushState(state,title,'/register') 修改路径
// 点击「登录」，通过 window.pushState(state,title,'/login') 修改路径

2. 简单例子

使用 Hash 模式

import React, { useState } from "react";
import ReactDOM from "react-dom";
function Tab1() {
  return (
    <div>这是页面 1 </div>
  )
}
function Tab2() {
  return (
    <div>这是页面 2</div>
  )
}
function App() {
  let [tab, setTab] = useState('#tab1')
  let hashValue = window.location.hash
  let tabPage = <Tab1 />
  if (hashValue === '#tab1') {
    tabPage = <Tab1 />
  } else if (hashValue === '#tab2') {
    tabPage = <Tab2 />
  } else {
    tabPage = <Tab2 />
  }
  return (
    <div>
      <button onClick={() => { setTab('tab1'); window.location.hash = '#tab1' }}>切换为 Tab1</button>
      <br />
      <button onClick={() => { setTab('tab2'); window.location.hash = '#tab2' }}>切换为 Tab2</button>
      {tabPage}
    </div>
  )
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

二、使用 React Router

我使用的例子都是 Hash 模式，没有使用 History 模式，React Router 记住以下几个常用标签

• Router
• Link
• Switch
• Route

import React from "react";
import ReactDOM from "react-dom";
import {HashRouter as Router,Link, Switch, Route} from 'react-router-dom'
function Tab1(){
  return (
    <div>这是页面 1 </div>
  )
}
function Tab2(){
  return (
    <div>这是页面 2</div>
  )
}
function App(){
  return (
    <Router>
    <div>
      <Link to='/tab1'>Tab1</Link>
      <br/>
      <Link to='/tab2'>Tab2</Link>
      <Switch>
      <Route path="/tab1" component={Tab1} />
      <Route path="/tab2" component={Tab2} />
      <Route exact path="/" component={Tab1} />
      </Switch>
    </div>
    </Router>
  )
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />,rootElement);

「@浪里淘沙的小法师」