0604嵌套路由与路由传参-react路由-react

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/parent/:parentId">
            {/* 当前路由的参数可以通过match对象访问 */}
            <Child />
          </Route>
          <Route path="/">
            <h1>Welcome to the main page</h1>
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
 
function Child({ match }) {
  // 使用match.params来访问嵌套路由的参数
  const { parentId } = match.params;
  return (
    <div>
      <h1>Parent ID: {parentId}</h1>
      {/* 嵌套路由 */}
      <Router>
        <Switch>
          <Route path="/parent/:parentId/child/:childId">
            <h2>Child ID: {match.params.childId}</h2>
          </Route>
        </Switch>
      </Router>
    </div>
  );
}
 
export default App;

这个代码示例展示了如何在React应用中使用react-router-dom进行嵌套路由以及如何在嵌套路由中传递参数。App组件定义了顶级路由，并在匹配/parent/:parentId路径时渲染Child组件。Child组件内部再定义了嵌套的子路由/parent/:parentId/child/:childId，并在此路由下渲染相关的组件。通过match.params对象，嵌套路由可以访问父级和自己的参数。