如何做路由反应js - JavaScript

React是一个流行的JavaScript库，用于构建用户界面。在React中，路由是一项必不可少的功能，允许应用程序根据URL路径显示不同的内容。在本文中，我们将介绍如何在React中使用React Router来实现路由功能。

步骤

1. 安装React Router

在React应用程序中使用React Router需要先安装它。在命令行中执行以下命令：

npm install react-router-dom --save

2. 导入React Router

在你的React组件中，你需要导入React Router:

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

3. 创建路由组件

在你的React组件中，创建路由组件：

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const Contact = () => <h1>Contact</h1>;

4. 创建路由

使用React Router，你需要在你的应用程序中创建路由。在你的渲染方法中，你需要包装你的组件在Router组件中:

<Router>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
  </Switch>
</Router>

这里，我们定义了三个路由：主页，关于我们和联系我们，并为每个路由定义了一个组件。我们还使用了exact属性来告诉React Router只有在URL精确匹配时才渲染该组件。

5. 完成

现在你已经完成了React Router的使用。你可以在应用程序中添加更多的路由需要，并在每个路由下面定义你的组件。你可以使用Link组件来链接到这些路由，来让用户可以导航你的应用程序。

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

<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>

总结

React Router是构建React应用程序必不可少的一部分。它允许你根据URL路径来显示不同的内容，并帮助你构建一个单页应用程序。通过这篇文章，你应该已经知道如何在React中使用React Router了。