说实话，React Router 是咱前端开发必备的技Neng之一，哈哈，你懂的。

你得安装 react-router-dom 这个包。

# 安装 React Router DOM npm install react-router-dom

这个包是专门为浏览器环境设计的，提供了各种路由组件，咱就是说hen方便。

// src/App.js import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Home from './Home'; import About from './About'; import Contact from './Contact'; function App { return ( <BrowserRouter> <Routes> {/* 首页路由 */} <Route path="/" element={<Home />} /> {/* 关于页面路由 */} <Route path="/about" element={<About />} /> {/* 联系页面路由 */} <Route path="/contact" element={<Contact />} /> </Routes> </BrowserRouter> ); } 创建页面组件

// src/Home.js function Home { return <h1>首页</h1>; } export default Home; // src/About.js function About { return <h1>关于我们</h1>; } export default About; // src/Contact.js function Contact { return <h1>联系我们</h1>; } export default Contact;

为啥要创建这些组件呢？因为每个路由dou需要对应一个组件啊，哈哈。

import { Link } from 'react-router-dom'; function Navigation { return ( <nav> <Link to="/">首页</Link> | <Link to="/about">关于</Link> | <Link to="/contact">联系</Link> </nav> ); }

💡 注意：使用 Link 组件而不是 <a> 标签，因为 Link 不会重新加载页面。

为啥不用a标签呢？因为a标签会刷新页面啊，咱就是说这不是咱想要的。

害，这个问题问得好，其实有hen多原因，比如你的网站结构不友好，或者内容不够丰富等。

你需要检查你的网站是否对搜索引擎友好，比如是否有合适的 meta 标签，是否有 sitemap 等。

import { Routes, Route } from 'react-router-dom'; import ProductList from './ProductList'; import ProductDetail from './ProductDetail';

function App { return ( <Routes> <Route path="/products" element={<ProductList />} /> {/* 动态参数 :id */} <Route path="/products/:id" element={<ProductDetail />} /> </Routes> ); }

... // ❌ 没有用 BrowserRouter 包裹 function App { return ( <Routes> <Route path="/" element={<Home />} /> </Routes> ); }

// ✅ 使用 BrowserRouter 包裹 function App { return ( BrowserRouter Routes Route path="/" element={Home} /> /Routes /BrowserRouter ); }

...

React Router 作为 React 生态中Zui流行的路由解决方案,提供了强大而灵活的路由配置Neng力。 使用 createBrowserHistory Ke以创建浏览器历史记录实例。 不对不对，应该是使用 BrowserRouter 来包裹应用。

...

React Router 是实现单页应用路由的标准库。 React Router DOM 是专门为浏览器环境设计的版本。

...

创建一个包含首页、关于页、联系页的路由应用 创建产品列表页和产品详情页，使用动态路由 实现一个登录页面登录成功后重定向到首页 创建仪表盘页面包含嵌套路由

...