【react-router】嵌套路由

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/topics">
            <Topics />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  // const match = useRouteMatch({
  //   path:"/",
  //   exact:true,
  //   strict:true,
  //   sensitive:true
  // });
  // console.log(match);
  return <h2>Home</h2>;
}

function About() {
  // const match = useRouteMatch("/home");
  // console.log(match);
  return <h2>About</h2>;
}

function Topics() {
  let match = useRouteMatch();
  return (
    <div>
      <h2>Topics</h2>

      <ul>
        <li>
          <Link to={`${match.url}/topic1`}>Topic1</Link>
        </li>
        <li>
          <Link to={`${match.url}/topic2`}>Topic2</Link>
        </li>
      </ul>
      <Switch>
        <Route path={`${match.path}/:topicId`}>
          <Topic />
        </Route>
        <Route path={match.path}>
          <h3>Please select a topic.</h3>
        </Route>
      </Switch>
    </div>
  );
}

function Topic() {
  // const match = useRouteMatch();
  // console.log("userRouteMatch:",match);
  // const params = useParams();
  // console.log("useParams:",params);
  let { topicId } = useParams();
  return <h3>Requested topic ID: {topicId}</h3>;
}

• Home(localhost:3000/)
• About(localhost:3000/about)
• Topics(localhost:3000/topics)
  • Topic1(localhost:3000/topics/topic1)
  • Topic2(localhost:3000/topics/topic2)

路由配置

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

const routes = [
  {
    path:"/",
    exact:true,
    component:Home
  },
  {
    path:"/about",
    component:About
  },
  {
    path:"/topics",
    component:Topics,
    routes:[
      {
        path:"/topics/:id",
        component:Topic
      },
      {
        path:"/topics/:id",
        component:Topic
      }
    ] 
  }
]
export default function App(){
  return (
    <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>
      {
        routes.map((route,idx) => 
        <RouteWithSubRoutes key={idx} {...route} />
        )
      }
    </div>
    </Router>
  )
}
function RouteWithSubRoutes(route){
    return <Route path={route.path}
                  exact={route.exact}
                  render={props => <route.component {...props} routes={route.routes} />} />
}
function Home(){
  return <h2>Home</h2>;
}
function About(){
  return <h2>About</h2>
}
function Topics({routes}){
  return (
    <>
    <h2>Topics</h2>
    <ul>
      <li><Link to="/topics/topic1">Topic1</Link></li>
      <li><Link to="/topics/topic2">Topic2</Link></li>
    </ul>
    <Switch>
    {
      routes.map((route,idx) => <RouteWithSubRoutes key={idx} {...route}/>)
    }
    </Switch>
    </>
  );
}
function Topic(props){
  const {id} = props.match.params;
  return <h3>Requested topic ID: {id}</h3>;
}

效果同上。

useRouteMatch()

useRouteMatch()会尝试匹配当前URL。
不匹配，则返回null；
匹配，则返回一个对象。此时，可以在不实际渲染Route的情况下，访问匹配数据。
useRouteMatch()接受的参数

• 可以是一个字符串

 useRouteMatch("/home");//与当前路径`/home`是否匹配

• 也可以接受一个对象

useRouteMatch({
  path:"/",        //与当前路径`/`是否匹配
  exact:true,     //准确匹配
  strict:true,   //严格匹配
  sensitive:true//大小写敏感
});

useParams()

同useRouteMatch()返回的对象的params属性，是一个键值对。

//path/:topicId
const {topicId} = useParams();

//path/topic1,topicId则等于"topic1"
//path/topic2,topicId则等于"topic2"