React动态路由实现疑问：首页模块点击跳转至对应子页面

嘿，作为React新手，实现这种带跳转的动态路由其实非常直观，咱们用当前主流的React Router v6来搞定就好，我给你一步步拆解：

1. 先安装React Router #

首先得把路由库装到项目里，打开终端运行：

npm install react-router-dom
# 或者用yarn
yarn add react-router-dom

2. 配置全局路由结构 #

在你的项目入口文件（比如src/App.js或者src/index.js）里，用BrowserRouter包裹整个应用，然后通过Routes和Route定义好各个页面的路由规则：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home'; // 你的首页组件
import NewDealPage from './NewDealPage'; // New Deal的详情页
import RecentProductPage from './RecentProductPage'; // Recent Product的详情页

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 首页，对应根路径 */}
        <Route path="/" element={<Home />} />
        {/* New Deal页面，对应/new-deal路径 */}
        <Route path="/new-deal" element={<NewDealPage />} />
        {/* Recent Product页面，对应/recent-product路径 */}
        <Route path="/recent-product" element={<RecentProductPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

3. 编写首页组件（包含两个模块） #

在Home.js里，你要渲染New Deal和Recent Product模块，然后用React Router提供的Link组件来做无刷新跳转（别用普通的<a>标签，会整页刷新，不符合单页应用的特性）：

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

function Home() {
  return (
    <div className="home-page">
      {/* New Deal模块 */}
      <div className="new-deal-module">
        <h2>New Deal</h2>
        {/* 这里放你的动态渲染内容 */}
        <p>这里是New Deal的动态内容...</p>
        {/* 查看更多按钮，跳转到/new-deal */}
        <Link to="/new-deal" className="view-more-btn">查看更多</Link>
      </div>

      {/* Recent Product模块 */}
      <div className="recent-product-module">
        <h2>Recent Product</h2>
        {/* 这里放你的动态渲染内容 */}
        <p>这里是Recent Product的动态内容...</p>
        {/* 查看更多按钮，跳转到/recent-product */}
        <Link to="/recent-product" className="view-more-btn">查看更多</Link>
      </div>
    </div>
  );
}

export default Home;

4. 编写对应的详情页组件 #

最后就是写NewDealPage.js和RecentProductPage.js的内容，比如：

// NewDealPage.js
function NewDealPage() {
  return (
    <div>
      <h1>所有New Deal内容</h1>
      {/* 这里放New Deal的完整列表或详情 */}
    </div>
  );
}

export default NewDealPage;

// RecentProductPage.js
function RecentProductPage() {
  return (
    <div>
      <h1>所有Recent Product内容</h1>
      {/* 这里放Recent Product的完整列表或详情 */}
    </div>
  );
}

export default RecentProductPage;

这样就完成啦！点击首页的两个“查看更多”按钮，就会无刷新跳转到对应的页面，完全符合你要的www.abc.com/new-deal和www.abc.com/recent-product路径要求。如果之后需要加更多路由，只需要在Routes里新增Route，然后用Link跳转就行，非常灵活~

内容的提问来源于stack exchange，提问作者Ras