【React】React-router路由

React-router 是一个用于 React 应用程序的路由库，它允许你定义页面的导航和路由。

以下是一个简单的例子，展示如何使用 React-router 创建一个带有两个路由的应用程序：

首先，安装 react-router-dom：

npm install react-router-dom

然后，你可以使用 BrowserRouter 或 HashRouter 来定义应用程序的路由。通常 BrowserRouter 用于生产环境，而 HashRouter 用于开发环境。

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
function Home() {
  return <h2>Home</h2>;
}
 
function About() {
  return <h2>About</h2>;
}
 
const App = () => (
  <BrowserRouter>
    <Switch>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  </BrowserRouter>
);
 
export default App;

在上面的代码中，<BrowserRouter> 是最外层的路由组件，它包裹了 <Switch> 和多个 <Route> 组件。每个 <Route> 定义了一个路由规则，当 URL 匹配指定的 path 时，就会渲染对应的组件。<Switch> 用于在路由之间切换，它只渲染第一个匹配的路由。

要导航到不同的路由，你可以使用 <Link> 组件：

import { Link } from 'react-router-dom';
 
const NavLinks = () => (
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
  </nav>
);

当用户点击 <Link> 时，React-router 会将浏览器的 URL 更改为对应的路径，并渲染相应的组件。