📅  最后修改于: 2023-12-03 15:39:05.996000             🧑  作者: Mango
React-Router 是 React.js 的一个常用工具包,用于管理 React.js 应用的路由。
要安装 React-Router,请先在你的项目里安装 React.js,然后在终端中输入以下命令:
npm install react-router-dom
这将会安装 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",每个路由对应的组件分别是 Home
、About
和 Contact
。exact
表示只有在精确匹配时才渲染对应的组件。
现在,当我们在浏览器中访问应用的不同 URL 时,React-Router 将会自动渲染对应的组件。