React Router跳转路径正确但对应组件不显示的解决方案

路由失效是3个核心问题叠加导致的，和Redux、强制安装依赖的操作没有直接关系：

• 路径存在拼写错误：所有跳转和路由配置里写的是/diplayed-list，漏了字母s，正确拼写应为/displayed-list，但这不是组件不渲染的核心原因
• 不符合React Router v6的路由匹配规则：你在App.js里给AddContact配置的路由是/add-contact/*，意味着AddContact内部的子路由只能匹配/add-contact/xxx前缀的路径，但你写的子路由是绝对路径/diplayed-list，跳转后直接离开了/add-contact的前缀范围，上层App.js根本没有配置该路径对应的路由出口，地址栏更新只是Link组件修改了URL，没有匹配的路由就不会渲染任何内容
• 排查操作使用的是React Router v5的废弃语法：v6版本已经移除了exact属性、component路由配置项，加这些配置不会生效，反而会触发语法警告
• 额外隐患：依赖中react为18版本、react-dom为17版本，版本不匹配后续会触发hydration类渲染错误，建议统一版本

1. 修正App.js路由配置 #

把列表页路由统一放到App层管理，不要塞在AddContact组件内部，同时修正路径拼写：

// App.js
import React from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import AddContact from './components/AddContact';
import DisplayedList from './components/DisplayedList';

const App = () => {
  return (
    <div className='container'>
      <div className='row'>
        <div className='col-12'>
          <h1>React Contact List</h1>
        </div>
      </div> 
      <div className='row'>
        <div className='col'>
          <Link to="/add-contact">
            <button id='add-contact-btn' className='btn btn-primary'>Add Contact</button>
          </Link>
        </div>
      </div>
      <Routes>
        <Route path="/add-contact" element={<AddContact />} />
        <Route path="/displayed-list" element={<DisplayedList />} />
        <Route path="/" element={<DisplayedList />} />
      </Routes>
    </div>
  )
}

export default App;

2. 修正AddContact组件代码 #

删除组件内部无效的路由配置，修正跳转路径，解决按钮嵌套Link导致的表单默认提交问题：

// AddContact.js
import { Link, useNavigate } from "react-router-dom";

const AddContact = () => {
  const navigate = useNavigate();
  const handleSubmit = (e) => {
    e.preventDefault();
    // 此处写入联系人存储逻辑
    navigate("/displayed-list");
  }

  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <label htmlFor="full-name">Full Name:</label>
        <input type="text" className="form-control" id="full-name" />
      </div>
      <div className="form-group">
        <label htmlFor="email">Email:</label>
        <input type="email" className="form-control" id="email" />
      </div>
      <div className="form-group">
        <label htmlFor="phone-number">Phone Number:</label>
        <input type="text" className="form-control" id="phone-number" />
      </div>
      <div className="form-group">
        <label htmlFor="image">Image:</label>
        <input type="text" className="form-control" id="image" />
      </div>
      <Link to="/displayed-list">
        <button type="button" className="btn btn-secondary me-2">Go Back</button>
      </Link>
      <button type="submit" className="btn btn-primary">Submit</button>
    </form>
  )
}

export default AddContact;

3. 简化index.js冗余配置 #

移除v6不需要的多余路由包裹，匹配React18的渲染API：

// index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

4. 修复依赖版本不匹配问题 #

执行命令统一react相关依赖版本，避免后续出现渲染异常：

npm install react@18 react-dom@18 --force

修改完成后重启开发服务器：

• 访问http://localhost:3000会直接渲染联系人列表测试内容
• 点击Add Contact按钮可正常进入添加表单页
• 点击Go Back或Submit按钮可正常跳回列表页，组件会正常出现在开发者工具组件树中

注意：React Router v6所有路由默认是精确匹配，不需要额外加exact属性；路由渲染统一使用element属性传入React元素，component属性是v5废弃语法，v6不再支持。

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