React Router 是一个基于 React 的声明式路由库，它使得构建单页面应用程序（SPA）变得简单而灵活。React Router 让你能够定义路径和组件之间的映射，并根据用户的浏览历史来渲染正确的组件。

React Router 的主要特性

  • 声明式导航：使用 <Link> 或 <NavLink> 组件进行导航，而不是使用 window.location 或 history.push。
  • 动态路由匹配：使用 <Route> 组件的 path 和 component 属性来匹配路径并渲染相应的组件。
  • 路由嵌套：通过在 <Route> 组件内部使用 <Route> 来创建嵌套的路由。
  • 路由懒加载：通过动态导入（Dynamic Imports）来分割代码，从而减少初始加载时间。

快速入门

要使用 React Router，首先需要在项目中安装它：

npm install react-router-dom

然后，在你的组件中使用 <Router> 组件包裹你的应用，并使用 <Route> 组件定义路由：

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

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

export default App;

图片示例

在 React Router 中，你可以通过以下方式来传递参数到路由组件：

<Route path="/user/:id" component={User} />

当访问 /user/123 时，User 组件会收到 id 参数为 123。

更多关于 React Router 的信息和最佳实践，请访问本站React Router 教程。

React_Router