基础知识 - 路由 ​

<!-- 嵌套路由组件(子级路由) Home.jsx -->
import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import list1 from "./Home/list1"; 
import list2 from "./Home/list2";
import NotFounted from "./NotFounted";
export default function Home() {
  return (
    <div>
      首页
      {/* 当前页面嵌套了两个路由 或在Home组件下嵌套显示 */}
      <Switch>
        <Route path="/Home/list1" component={list1}></Route>
        <Route path="/Home/list2" component={list2}></Route>
     

        {/* 如果从匹配到从/Home页面过来，就重定向到list2组件 */}
        <Redirect from="/Home" to="/Home/list1" exact></Redirect>

        {/* 如果没有匹配的路由 显示404组件 */}
        <Route component={NotFounted}></Route>
      </Switch>
    </div>
  );
}

<!-- 路由组件 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";
export default function IndexRouter() {
  return (
    <div>
      {/* Hash模式 */}
      <HashRouter>
        {/* 被Switch组件包裹之后，React会自动帮我们检测重定向地址 */}
        <Switch>
          {/* 路由表 */}
          <Route path="/Home" component={Home}></Route>
          <Route path="/News" component={News}></Route>
          <Route path="/Wode/Wode" component={Wode}></Route>
             
          {/* 当没有匹配的路由时 */}
          <Route path="*" component={NotFounted}></Route>
          <!-- 搜索/ 重定向到Home组件 -->
          <Redirect from="/" to="/Home" exact></Redirect>
        </Switch>
      </HashRouter>
    </div>
  );
}

<!-- 根组件App.jsx -->
import React from "react";
import ReactDom from 'react-dom';
// 导入自己封装的路由组件
import IndexRouter from "./view/一级路由与多级路由/IndexRouter";
export default function App() {
  return (
    <div>
      <IndexRouter></IndexRouter>
    </div>
  );
}

ReactDom.render(<App/>,document.getElementById('root'))