📜  安装 React-Router (1)

📅  最后修改于: 2023-12-03 15:39:05.996000             🧑  作者: Mango

安装 React-Router

React-Router 是 React.js 的一个常用工具包,用于管理 React.js 应用的路由。

要安装 React-Router,请先在你的项目里安装 React.js,然后在终端中输入以下命令:

npm install react-router-dom

这将会安装 React-Router 的最新版本,并且会将其添加到你的项目依赖列表中。

使用 React-Router

在安装 React-Router 之后,你就可以在你的应用中使用它了。在 React.js 中,你可以使用 React-Router 来定义你的应用的路由,以便在不同的 URL 中渲染不同的组件。

在你的 React.js 应用中引入 React-Router:

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

现在,你可以使用 <Router> 组件包裹你的应用组件:

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

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

export default App;

在这个例子中,我们定义了三个路由:"/"、"/about" 和 "/contact",每个路由对应的组件分别是 HomeAboutContactexact 表示只有在精确匹配时才渲染对应的组件。

现在,当我们在浏览器中访问应用的不同 URL 时,React-Router 将会自动渲染对应的组件。