react嵌套路由（结合新版Hooks-useRouteMatch, useParams）

基本的 嵌套路由组件，直接在代码中，引入即可，

// 嵌套路由
import React from 'react';
import BackHome from '../component/BackHome'; // 返回首页组件
import { BrowserRouter as Router, Switch, Route, Link,useRouteMatch, useParams } from "react-router-dom";
/*
  useRouteMatch, useParams 为新版Hooks新增项
*/ 
const Topics = () => {
  let match = useRouteMatch();
  return(
    <div>
      <BackHome/>
      <div>
        <h2>Nested Routing</h2>
        {/* 所有内容均需放进 <Router>内 */}
        <Router>
          {/* 嵌套路由按钮 */}
          <ul>
            <li>
              <Link to={`${match.url}/components`}>
                Components
              </Link>
            </li>
            <li>
              <Link to={`${match.url}/props-v-state`}>
                Props v. State
              </Link>
            </li>
          </ul>

          {/* 嵌套路由内容 */}
          <Switch>
            <Route path={`${match.path}/:topicId`}>
              <Topic />
            </Route>
            <Route path={match.path}>
              <h3>Please select a topic.</h3>
            </Route>
          </Switch>
        </Router>
      </div>
    </div>
  )
}

function Topic() {
  let { topicId } = useParams();
  return <h3>Requested Routing ID: {topicId}</h3>;
}

export default Topics;

后续会单独总结 react-router-dom 及 Hooks