React的嵌套子路由和导航首位

在React中，嵌套子路由通常是通过react-router-dom库中的<Route>组件实现的，而导航首位则通常通过react-router-dom中的<NavLink>组件实现。以下是一个简单的例子：

import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
 
const App = () => (
  <Router>
    <div>
      <NavLink to="/" exact activeClassName="active">Home</NavLink>
      <NavLink to="/about" activeClassName="active">About</NavLink>
      <NavLink to="/users" activeClassName="active">Users</NavLink>
 
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/users" component={Users} />
    </div>
  </Router>
);
 
const Home = () => <h2>Home Page</h2>;
const About = () => <h2>About Page</h2>;
const Users = () => (
  <div>
    <h2>Users Page</h2>
    <NavLink to="/users/john" activeClassName="active">John</NavLink>
    <NavLink to="/users/mary" activeClassName="active">Mary</NavLink>
 
    <Route path="/users/:userId" component={UserProfile} />
  </div>
);
 
const UserProfile = ({ match }) => <h3>User: {match.params.userId}</h3>;
 
export default App;

在这个例子中，我们定义了一个App组件作为主要的布局组件，其中包含了三个导航链接和对应的子路由。Users组件内部还定义了进一步的嵌套路由，用于显示用户个人资料。NavLink组件用于实现导航功能，其activeClassName属性用于指定当前激活的链接所应该添加的类名。