Create React App 添加 Router(路由)

在 Create React App 中，我们可以使用 React Router 来管理页面之间的路由。React Router 是一个流行的第三方库，它可以帮助我们在 React 应用中实现路由功能。

安装 React Router

首先，我们需要安装 React Router。在终端中使用以下命令来安装 React Router：

npm install react-router-dom

在应用中添加路由

在我们的应用中，我们可以使用 <BrowserRouter> 组件来包裹整个应用，并在其中定义路由。例如：

// www.javascriptcn.com code example
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

export default App;

在上面的例子中，我们定义了两个路由：一个是根路径 / 对应 Home 组件，另一个是 /about 对应 About 组件。

使用 Link 组件进行导航

为了在应用中进行页面之间的导航，我们可以使用 <Link> 组件。例如：

// www.javascriptcn.com code example
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
    </nav>
  );
}

export default Navbar;

在上面的例子中，我们定义了一个导航栏组件，其中包含两个链接，分别指向根路径和关于页面。

通过以上步骤，我们成功地在 Create React App 中添加了路由功能。您可以根据实际需求，进一步扩展路由配置和页面组件。