React JS路由配置后点击/products路径products组件无内容显示问题

问题排查与修复方案 #

你使用的是React Router v6版本，存在3处需要修正的配置：

• 第一处：App.js中Route组件属性写法错误
  React Router v6废弃了component属性，改用element属性传入组件实例，修改对应代码如下：

// 原错误写法
<Route path= "/products" component={Products}></Route>
// 修正后写法
<Route path="/products" element={<Products />} />

• 第二处：导航组件使用原生a标签，未使用路由提供的Link组件
  原生a标签会触发整页刷新，无法实现客户端路由跳转，修改nav.jsx代码如下：
  首先引入Link组件：

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

然后替换所有a标签：

const NavBar = () => {
  return (
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/products">Products</Link>
      </li>
      <li>
        <Link to="/posts/2018/06">Posts</Link>
      </li>
      <li>
        <Link to="/admin">Admin</Link>
      </li>
    </ul>
  );
};

• 第三处：组件命名不统一（可选优化）
  products.jsx导出的默认组件名为Product，App.js中导入时命名为Products，虽然默认导出允许自定义导入名称，建议保持命名对齐避免后续维护混淆。

修改完成后重启项目即可正常显示Products页面内容。

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