代码证明react中路由的优点

React 中使用 React Router 实现路由的优点有以下几点：

1. 路由配置灵活：React Router 可以根据路由的不同需求进行灵活的配置，可以配置多级路由、动态路由和嵌套路由等。

2. 路由状态管理：React Router 可以使用路由状态来管理应用程序的状态，可以使用路由参数传递数据、使用路由钩子函数进行路由跳转前的处理、使用 React Context 进行跨组件状态管理等。

3. 路由代码分割：React Router 可以将路由代码进行分割，实现按需加载，提高应用程序的加载速度。

4. 路由与 Redux 集成：React Router 可以与 Redux 进行集成，实现将路由状态存储在 Redux Store 中，方便进行全局状态管理。

下面是一个简单的 React Router 示例代码：

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

const 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="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/contact">
          <Contact />
        </Route>
      </Switch>
    </Router>
  );
};

const Home = () => {
  return <h1>Welcome to Home Page</h1>;
};

const About = () => {
  return <h1>Welcome to About Page</h1>;
};

const Contact = () => {
  return <h1>Welcome to Contact Page</h1>;
};

export default App;

在这个示例中，我们使用 `BrowserRouter` 作为路由容器，使用 `Link` 组件来实现路由跳转，使用 `Switch` 和 `Route` 组件来配置路由。通过这种方式，我们可以灵活地配置路由，并且可以实现路由状态管理、代码分割和与 Redux 集成等功能。