react路由

在 React 应用中，可以使用第三方库 React Router 来实现路由的功能，React Router 提供了多种路由实现的方式。

一般来说，React Router 应该在 Router 组件中进行配置。下面给出一种使用 BrowserRouter 的简单示例：

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

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Contact = () => <h2>Contact</h2>;

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

在这个示例中，我们首先引入了 React Router 中常用的组件和函数（BrowserRouter、Route、Switch、Link），然后在 App 函数中使用了 Router 组件来进行路由的配置，其中：

• nav 中添加了几个 Link 组件，用于导航到不同的页面；
• Switch 中添加了几个 Route 组件，用于匹配 URL 并渲染对应的组件；

其中 exact 表示精确匹配，如果不加 exact 的话，路由 /about 也会显示 Home 页面。

接下来介绍一些常用的 Route 组件的属性，你可以根据实际需要来按需使用：

• path：表示路由匹配的 URL，可以使用 : 表示占位符，例如 /users/:id；
• component：表示路由匹配成功后需要渲染的组件；
• exact：表示是否精确匹配 URL；
• render：表示需要渲染的组件，可以使用函数的形式来动态生成组件；
• children：表示需要渲染的子组件，不管 URL 是否匹配，此组件都会被渲染；
• location：表示当前路由的位置对象，用于在组件中获取 URL 相关信息。