基础知识 - 路由 ​

<!-- Home.jsx -->
import React from "react";
import { Route, Switch, Redirect, withRouter } from "react-router-dom";
import list1 from "./Home/list1";
import list2 from "./Home/list2";
import NotFounted from "./NotFounted";

export default function Home() {
  return (
    <div>
      <Switch>
        <Route path="/Home/list1" component={list1}></Route>
        <Route path="/Home/list2" component={list2}></Route>
        <Redirect from="/Home" to="/Home/list1" exact></Redirect>

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

      {/* 组件 */}
      <WithRouterFltem></WithRouterFltem>
    </div>
  );
}

// 这样被包装一下 Fltem组件具备了一些路由方面的能力
const WithRouterFltem = withRouter(Fltem); //withRouter 会返回一个新的组件

const Fltem = (props) => {
  //如果不被withRouter包裹一层 则props不具备跳转的能力
  return <div>Fltem组件</div>;
};


<!-- IndexRouter.jsx -->
import React from "react";
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
import Home from "./tabber/Home";
import Wode from "./tabber/wode";
import NotFounted from "./tabber/NotFounted";
export default function IndexRouter(props) {

  return (
    <div>
      <HashRouter>
        <Switch>
          <Route path="/Home" component={Home}></Route>
          <Route path="/Wode/Wode" render={(props) => <Wode {...props} /></Route>

          <Redirect from="/" to="/Home" exact></Redirect>
          <Route path="" component={NotFounted}></Route>
        </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'))