React中的路由

React中的路由指的是将不同的组件映射到不同的URL上，实现页面跳转和组件复用的功能。React中常用的路由库有React Router和Reach Router。

React Router

React Router是最流行的React路由库之一，它支持浏览器、原生应用和服务器等多个平台。下面是React Router的基本用法。

安装React Router

npm install react-router-dom

在项目中使用

在需要使用路由的地方引入BrowserRouter组件，并在其内部添加路由规则。

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
}

export default App;

在上面的例子中，exact属性表示只有当URL完全匹配时才渲染组件，否则将不渲染；path属性表示URL模式，component属性表示对应的组件。

嵌套路由

React Router支持嵌套路由，可以将组件嵌套在其他组件内部，通过children属性传递进行渲染。下面是一个简单的例子。

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Home from './Home';
import Products from './Products';

function App() {
  return (
    <BrowserRouter>
      <Route exact path="/" component={Home} />
      <Route path="/products" component={Products} />
    </BrowserRouter>
  );
}

export default App;

在Products组件中，可以再次添加Route组件，实现嵌套路由的功能。

import React from 'react';
import { Route } from 'react-router-dom';
import ProductList from './ProductList';
import ProductDetail from './ProductDetail';

function Products() {
  return (
    <div>
      <h1>Products</h1>
      <Route exact path="/products" component={ProductList} />
      <Route path="/products/:id" component={ProductDetail} />
    </div>
  );
}

export default Products;

在上面的例子中，:id表示路由参数，可以在ProductDetail组件中通过this.props.match.params.id访问。

路由跳转

React Router提供了Link组件和history对象来实现路由跳转。Link组件在渲染时会自动添加点击事件，通过to属性来指定跳转的URL。

import React from 'react';
import { Link } from 'react-router-dom';

function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link to="/about">About</Link>
    </div>
  );
}

export default Home;

使用history对象可以实现编程式跳转。

import React from 'react';

function ProductDetail(props) {
  return (
    <div>
      <h1>Product Detail</h1>
      <p>ID: {props.match.params.id}</p>
      <button onClick={() => props.history.push('/products')}>Back</button>
    </div>
  );
}

export default ProductDetail;

在上面的例子中，props.history.push('/products')表示跳转到/products页面。

Reach Router

Reach Router是一个轻量级的React路由库，它支持静态路由、嵌套路由和路由参数等功能。下面是Reach Router的基本用法。

安装Reach Router

npm install @reach/router

在项目中使用

在需要使用路由的地方引入Router组件，并在其内部添加路由规则。

import React from 'react';
import { Router } from '@reach/router';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <Home path="/" />
      <About path="/about" />
    </Router>
  );
}

export default App;

在上面的例子中，path属性表示URL模式，组件可以直接作为子元素渲染。

嵌套路由

Reach Router支持嵌套路由，可以将组件嵌套在其他组件内部，通过children属性传递进行渲染。下面是一个简单的例子。

import React from 'react';
import { Router } from '@reach/router';
import Home from './Home';
import Products from './Products';

function App() {
  return (
    <Router>
      <Home path="/" />
      <Products path="/products/*" />
    </Router>
  );
}

export default App;

在Products组件中，可以再次添加Router组件，实现嵌套路由的功能。

import React from 'react';
import { Router } from '@reach/router';
import ProductList from './ProductList';
import ProductDetail from './ProductDetail';

function Products() {
  return (
    <div>
      <h1>Products</h1>
      <Router>
        <ProductList path="/" />
        <ProductDetail path=":id" />
      </Router>
    </div>
  );
}

export default Products;

在上面的例子中，:id表示路由参数，可以在ProductDetail组件中通过props.id访问。

路由跳转

Reach Router提供了Link组件和navigate函数来实现路由跳转。Link组件在渲染时会自动添加点击事件，通过to属性来指定跳转的URL。

import React from 'react';
import { Link } from '@reach/router';

function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link to="/about">About</Link>
    </div>
  );
}

export default Home;

使用navigate函数可以实现编程式跳转。

import React from 'react';

function ProductDetail(props) {
  return (
    <div>
      <h1>Product Detail</h1>
      <p>ID: {props.id}</p>
      <button onClick={() => props.navigate('/products')}>Back</button>
    </div>
  );
}

export default ProductDetail;

在上面的例子中，props.navigate('/products')表示跳转到/products页面。