如何在react中路由到不同的页面？

在React中，可以使用React Router来实现路由到不同的页面。React Router是React官方推荐的路由库，它可以帮助我们在单页应用中管理页面的导航和路由。

要在React中路由到不同的页面，首先需要安装React Router。可以使用以下命令来安装React Router：

npm install react-router-dom

安装完成后，在应用的根组件中引入React Router的相关组件和方法：

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

接下来，可以在根组件中定义不同的页面组件，并使用Route组件来指定路径和对应的组件：

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

上述代码中，exact属性表示只有在路径完全匹配时才渲染对应的组件。path属性指定路径，component属性指定对应的组件。

在上述代码中，我们定义了三个页面组件：Home、About和Contact。当用户访问根路径时，会渲染Home组件；当用户访问/about路径时，会渲染About组件；当用户访问/contact路径时，会渲染Contact组件。

除了使用Route组件，还可以使用Link组件来创建导航链接，让用户可以点击链接进行页面跳转。例如，在导航栏中添加链接：

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

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

上述代码中，使用Link组件创建了三个导航链接，分别对应不同的路径。

通过以上步骤，就可以在React中实现路由到不同的页面了。当用户点击导航链接时，页面会根据路径的变化而重新渲染对应的组件。