User Profile

User ID: {userId}

        <hr />

        {/* Outlet 用于渲染嵌套路由的内容 */}
        <Outlet />
    </div>
);

}
export default Layout;

```

4. 配置路由 (App.js)

在 App.js 中，我们将使用 BrowserRouter、Routes 和 Route 组件来配置路由。

```javascript
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import User from './components/User';
import NotFound from './components/NotFound';
import Layout from './components/Layout';

function App() {
return (


{/ 使用 Layout 作为父路由，实现布局 /}
}>
{/ 首页 /}
} />
{/ 其他页面 /}
} />
} />
{/ 动态路由 /}
} />
{/ 404 页面 /}
} />



);
}

export default App;
```
代码解释：

• BrowserRouter: 这是 React Router 的基础组件，它使用 HTML5 的 history API 来保持 UI 与 URL 同步。
• Routes: Routes 组件用于包裹所有的 Route。
• Route: Route 组件定义了 URL 路径与组件之间的映射关系。
  • path: 指定 URL 路径。
  • element: 指定当 URL 匹配时要渲染的组件。
  • index: 表示当父路由的路径完全匹配时，渲染的默认子路由（例如，/ 匹配时渲染 Home 组件）。
  • *: 通配符，用于匹配所有未定义的路由，通常用于显示 404 页面。
  • :userId: 这是一个动态路由参数。 React Router 会将 URL 中 : 后面的部分作为参数传递给组件。
• <Outlet /> : Outlet这个组件用在 Layout 组件中，用于显示当前路由匹配到的子组件。

5. index.js (入口文件)

```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(



);
```

6. 运行应用程序

现在，你可以运行你的应用程序了：

```bash
npm start

或者

yarn start
```

在浏览器中打开 http://localhost:3000，你将看到你的应用程序，并且可以通过导航链接在不同的页面之间切换。

7. 重要概念和技巧

• 嵌套路由: React Router v6 支持嵌套路由，你可以将 Route 组件嵌套在另一个 Route 组件中，以创建更复杂的路由结构。Layout 组件和 <Outlet /> 的使用就是嵌套路由的例子。
• 动态路由: 使用 :param 语法来定义动态路由参数，例如 /user/:userId。你可以使用 useParams Hook 在组件中获取这些参数。

• 编程式导航: 除了使用 <Link> 组件进行导航外，你还可以使用 useNavigate Hook 进行编程式导航：

  ```javascript
  import { useNavigate } from 'react-router-dom';

  function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
  navigate('/about'); // 导航到 /about
  };

  return (
  Go to About
  );
  }
  ```

• useLocation Hook: useLocation Hook 可以让你访问当前 URL 的信息，例如 pathname、search（查询参数）和 hash。

• Navigate component: <Navigate> 组件用来重定向。例如：
  javascript
<Route path="/old-path" element={<Navigate to="/new-path" replace />} />
  当用户访问 /old-path 时，会被重定向到 /new-path。replace 属性表示替换 history 堆栈中的当前条目，而不是添加一个新条目。

• Link 的 state 属性: 你可以通过 <Link> 组件的 state 属性在路由之间传递数据，然后在目标组件中通过 useLocation Hook 获取：

```javascript
// 在源组件中
Details

// 在目标组件中 (Details.js)
import { useLocation } from 'react-router-dom';

function Details() {
const location = useLocation();
const { id, name } = location.state || {}; // 使用 || {} 防止 state 为 null

return (

);
}
```

• 处理查询参数: 你可以使用 URLSearchParams API 或 useSearchParams Hook 来处理 URL 中的查询参数。useSearchParams 更方便：
  ```javascript
  import { useSearchParams } from 'react-router-dom';
  function MyComponent() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q'); // 获取名为 "q" 的查询参数

      const handleSearch = () => {
        setSearchParams({ q: 'new value' });  //更新q参数
      }
  }
  

  ```

总结

React Router v6 提供了一种强大而灵活的方式来管理 React 应用程序的路由。通过本文的示例和讲解，你应该已经掌握了 React Router v6 的基本用法，包括配置路由、嵌套路由、动态路由、编程式导航、处理 404 页面以及一些常用的 Hooks。 记住，实践是最好的学习方式，尝试修改示例代码并构建你自己的路由结构，以加深理解。