如何使用react-router v4提示

React Router v4 是一个用于构建单页应用程序的 React 路由库。它提供了一种简单且灵活的方式来管理应用程序的路由，并且与 React 生态系统无缝集成。

要使用 React Router v4，首先需要安装它。可以通过以下命令使用 npm 进行安装：

npm install react-router-dom

安装完成后，可以在应用程序的入口文件中导入所需的组件和函数：

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

React Router v4 提供了三个核心组件：Router、Route 和 Link。Router 组件用于包裹整个应用程序，Route 组件用于定义路由规则和对应的组件，Link 组件用于创建导航链接。

接下来，可以在应用程序中定义路由规则和对应的组件。例如，可以创建一个名为 Home 的组件，并将其与根路径 / 关联：

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
    </div>
  </Router>
);

export default App;

在上面的代码中，Link 组件用于创建一个指向根路径的导航链接。Route 组件则定义了根路径对应的组件为 Home。

除了根路径，还可以定义其他路径和对应的组件。例如，可以创建一个名为 About 的组件，并将其与路径 /about 关联：

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>

      <hr />

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

export default App;

在上面的代码中，新增了一个导航链接和一个路由规则，将路径 /about 关联到组件 About。