基础知识 - 路由 ​

import React from "react";
// 路由模块
import {
  HashRouter,
  BrowserRouter,
  Route,
  Switch,
  Redirect,
} from "react-router-dom";
import Home from "./tabber/Home";
import News from "./tabber/news";
import Wode from "./tabber/wode";
import NotFounted from "./tabber/NotFounted";

<!-- BrowserRouter模式 -->
export default function IndexRouter(props) {
  // console.log(props);
  const isToken = () => {
    return localStorage.getItem("token");
  };
  return (
    <div>
      <BrowserRouter> 
        <Switch>
          <Route path="/Home" component={Home}></Route>
            path="/Wode/Wode"
            render={() =>
              isToken() ? <Wode /> : <Redirect from="/" to="/"></Redirect>
            }
          ></Route>
          <Route path="/News" component={News}></Route>
          <Redirect from="/" to="/Home" exact></Redirect>
          <Route path="" component={NotFounted}></Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

<!-- HashRouter模式 -->
export default function IndexRouter(props) {
  // console.log(props);
  const isToken = () => {
    return localStorage.getItem("token");
  };
  return (
    <div>
      <HashRouter> 
        <Switch>
          <Route path="/Home" component={Home}></Route>
            path="/Wode/Wode"
            render={() =>
              isToken() ? <Wode /> : <Redirect from="/" to="/"></Redirect>
            }
          ></Route>
          <Route path="/News" component={News}></Route>
          <Redirect from="/" to="/Home" exact></Redirect>
          <Route path="" component={NotFounted}></Route>
        </Switch>
      </HashRouter>
    </div>
  );
}