基础知识 - 路由 ​

<!-- Footer组件 Footer.jsx -->
import React, { useMemo, useState } from "react";
import { NavLink, useHistory } from "react-router-dom";
import "../../../../../../public/css/01-组件的样式.css";
export default function Footers(props) {
  console.log(props);
  const [list] = useState([
    { name: "首页", url: "/Home" },
    { name: "新闻", url: "/News" },
    { name: "我的", url: "/Wode/Wode" },
  ]);
  const [Acitiveindex, setAcitiveindex] = useState(0);
  
  // 声明式导航
  const RouteList = useMemo(
    () =>
      list.map((item) => (
        <li>
          {/* to要跳转的地址  activeClassName属性会自动检测高亮 */}
          <NavLink to={item.url} activeClassName="Myactive">
            {item.name}
          </NavLink>
        </li>
      )),
    []
  );

  //编程式导航
  const History = useHistory(); // 创建Hooks useHistory钩子实例方法
  const Router2 = useMemo(
    () =>
      list.map((item, index) => (
        <li
          style={{ color: Acitiveindex === index ? "red" : "" }}
          key={index}
          onClick={() => {
            setAcitiveindex(index);
            History.push(item.url);
          }}
        >
          {item.name}
        </li>
      )),
    [Acitiveindex]
  );

  return (
    <div>
      <div style={{ margin: "20px" }}>
        声明式导航
        {RouteList}
      </div>
      <div style={{ margin: "20px" }}>
        编程式导航
        {Router2}
      </div>
    </div>
  );
}

<!-- IndexRouter组件 IndexRouter.jsx -->
import React from "react";
import { HashRouter, 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";
import Footers from "./tabber/Footers/Footers";
export default function IndexRouter(props) {
  return (
    <div>
      <HashRouter>
        <Switch>
          {/* 路由表 */}
          <Route path="/Home" component={Home}></Route>
          <Route path="/News" component={News}></Route>
          <Route path="/Wode/Wode" component={Wode}></Route>

          <Redirect from="/" to="/Home" exact></Redirect>

          <Route path="" component={NotFounted}></Route>
        </Switch>

        {/* 利用插槽将footer组件包裹在HashRouret组件内 */}
        {props.children}
      </HashRouter>
    </div>
  );
}

<!-- App根组件 App.jsx -->
import React from "react";
import ReactDom from "react-dom";

// 导入自己封装的路由组件
import IndexRouter from "./view/一级路由与多级路由/IndexRouter";
import Footers from "./view/一级路由与多级路由/tabber/Footers/Footers";
export default function App() {
  return (
    <div>
      <IndexRouter>
        {/* 路由组件必须放在HashRoute组件里面 这边利用插槽放进去 */}
        <Footers></Footers>
      </IndexRouter>
    </div>
  );
}
ReactDom.render(<App/>,document.getElementById('root'))