React中如何使用useParams获取的id实现动态内容渲染

问题分析 #

• 导航链接配置错误：你在NavLink中直接使用路由参数占位符:id作为跳转路径，导致实际访问URL为/render/:id，而非对应数据的具体路径（如/render/co2），因此useParams无法获取有效id。
• Render组件未动态利用id：仍硬编码访问DataPages.co2，未结合useParams返回值实现数据动态加载。

修正步骤 #

1. 调整App.js的导航链接 #

将导航栏改为对应三个数据项的具体链接，指向带实际参数的路由路径：

import './App.css';
import { Route, Routes, NavLink } from 'react-router-dom';
import Home from './Home';
import Render from './Render';

function App(props) {
  return (
    <div className="App">
      <nav>
        <ul>
          <li>
            <NavLink to="/">Home</NavLink>
          </li>
          <li>
            <NavLink to="/render/temperature">Temperature</NavLink>
          </li>
          <li>
            <NavLink to="/render/co2">Carbon Dioxide</NavLink>
          </li>
          <li>
            <NavLink to="/render/methane">Methane</NavLink>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path='/' element={<Home />}></Route>
        <Route path='/render/:id' element={<Render />}></Route>
      </Routes>
    </div>
  );
}

export default App;

2. 修改Render组件实现动态数据渲染 #

通过useParams获取id，利用对象属性访问语法动态获取对应数据，并添加无效id的容错处理：

import React from 'react'
import Content from './Content'
import DataPages from './DataPages'
import { useParams } from 'react-router-dom'

function Render() {
  const { id } = useParams();
  // 根据id获取对应数据，若id无效则返回默认内容
  const pageData = DataPages[id] || {
    title: '数据不存在',
    subtitle: '',
    description: '选择的数据类型无效，请重新选择。'
  };

  return (
    <div>
      <Content
        title={pageData.title}
        subtitle={pageData.subtitle}
        description={pageData.description}
      ></Content>
    </div>
  )
}

export default Render

说明 #

• 导航链接现在指向具体参数路径，点击后URL会包含对应数据的key（如/render/temperature），useParams可正确解析出id值。
• 通过DataPages[id]动态访问对象属性，实现路由参数与数据的绑定。
• 容错处理可避免因无效id导致的页面报错，提升用户体验。

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