React Router 路由详解

1. 安装 react-router-dom

首先，你需要安装 react-router-dom ，可以使用 npm 或 yarn 来安装：

npm install react-router-dom
yarn add react-router-dom

2. 创建路由

在React应用中，可以定义路由来指定URL与组件之间的映射关系。这通常在 App.js 或其他顶级组件中完成。

import React from 'react';  
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';  
import Home from './pages/Home';  
import About from './pages/About';  
import Contact from './pages/Contact';  
  
function App() {  
  return (  
    <Router>  
      <Switch>  
        <Route exact path="/" component={Home} />  
        <Route path="/about" component={About} />  
        <Route path="/contact" component={Contact} />  
      </Switch>  
    </Router>  
  );  
}  
  
export default App;

在上述代码中，使用了 BrowserRouter（简写为Router）来包裹整个应用。

Switch组件 用于只渲染第一个匹配的路由，而 Route组件 则定义了URL路径与组件之间的映射关系。

3. 创建链接和导航

在React中，可以使用Link组件来创建链接，并使用 <a> 标签的样式。

import React from 'react';  
import { Link } from 'react-router-dom';  
  
function Navbar() {  
  return (  
    <nav>  
      <ul>  
        <li>  
          <Link to="/">Home</Link>  
        </li>  
        <li>  
          <Link to="/about">About</Link>  
        </li>  
        <li>  
          <Link to="/contact">Contact</Link>  
        </li>  
      </ul>  
    </nav>  
  );  
}  
  
export default Navbar;

在上述代码中，我们使用了 Link组件 来创建链接，并通过 to属性 指定了链接的目标 URL。

当用户点击这些链接时，React Router 将自动处理导航，并渲染相应的组件。

4. 渲染路由参数和查询字符串

可以使用 React Router 来渲染路由参数和查询字符串。

这通常在组件内部完成，使用 useParams 和 useLocation 这两个 Hook。

import React from 'react';  
import { useParams, useLocation } from 'react-router-dom';  
  
function UserPage() {  
  const { id } = useParams(); // 从URL中解析参数，例如：/user/123 中的 123  
  const location = useLocation(); // 获取当前位置对象，包含pathname、search等属性  
  
  return (  
    <div>  
      <h1>User ID: {id}</h1>  
      <p>Query string: {location.search}</p>  
    </div>  
  );  
}  
  
export default function UserRoutes() {  
  return (  
    <Route path="/user/:id" component={UserPage} />  
  );  
}

在上述代码中，使用了 useParams Hook 来从 URL 中解析参数，并使用 useLocation Hook 来获取当前位置对象。
这样就可以在组件内部使用这些参数和查询字符串了。