React路由跳转异常：点击Header链接无法渲染Trolley组件

问题描述 #

尝试从Header组件打开Trolley组件，已使用react-router-dom的Routes配置路由。点击链接图标后，localhost地址后添加了/Trolley，但页面无变化，App组件持续渲染，Trolley组件未显示。

相关代码 #

App.js #

import Heading from './Components.js/Heading.js'
import './App.css'

function App () {
  return (
    <div>
      <Heading />
    </div>
  );
}

export default App

index.js #

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter, Routes, Route} from "react-router-dom"
import Payment from './Components.js/Payment.js'
import Trolley from './Components.js/Trolley.js'
import './index.css'
import App from './App.js'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
      <Routes>
        <Route exact path="/" component={<App />} />
        <Route exact path="/Component.js/Trolley.js" component={Trolley} />
        <Route exact path="/Component.js/Checkout.js" component={Payment}/>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
)

Heading 组件 #

import React from 'react'
import { React Icon } from 'react-icons/'
import { Link } from "react-router-dom"

function Heading () {
  let pagetitle = "Page Title"
  return (
    <nav> 
      <div>
        <Link to="/App"></Link>
        <Link to="/App"><h1>{pagetitle}</h1></Link>
      </div> 
      <div>
        <Link to="/Trolley">React Icon</Link>
      </div>
    </nav>
  )
}

export default Heading

Trolley 组件 #

import { Link } from "react-router-dom"

function Trolley () {
  let pagetitle = "Page Title"
  return (
    <div>
      <div>
        <nav> 
          <div>
            <h1>{pagetitle}</h1>
          </div>
        </nav>
        <div>
          <button>
            Shop More
          </button>
          <div>
            <Link to="./Payment.js">Pay Now</Link>
          </div>
        </div>
      </div>
    </div>
  )
}  

export default Trolley

问题分析 #

1. 路由结构错误：index.js中<App />直接在BrowserRouter下渲染，无论路由如何切换，App组件都会一直显示，不受路由规则控制。
2. React Router v6 API 使用错误：v6版本已废弃component属性，改用element指定路由渲染的组件；同时exact属性不再需要，Routes组件默认精准匹配路径。
3. 路径不匹配：路由配置中Trolley的路径是/Component.js/Trolley.js，但链接指向/Trolley，两者不对应，导致无法匹配到Trolley组件。
4. 链接路径错误：Heading中的首页链接指向/App，但路由配置里首页路径是/；Trolley中的支付链接指向./Payment.js，也和路由配置路径不匹配。

修复方案 #

修正 index.js #

将App组件纳入路由规则，移除单独渲染的<App />，改用element属性，修正路由路径：

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter, Routes, Route} from "react-router-dom"
import Payment from './Components.js/Payment.js'
import Trolley from './Components.js/Trolley.js'
import './index.css'
import App from './App.js'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="/Trolley" element={<Trolley />} />
        <Route path="/Payment" element={<Payment />}/>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
)

修正 Heading 组件 #

调整链接路径，首页指向/，保持和路由配置一致：

import React from 'react'
import { FaShoppingCart } from 'react-icons/fa' // 修正react-icons导入，替换为实际需要的图标
import { Link } from "react-router-dom"

function Heading () {
  let pagetitle = "Page Title"
  return (
    <nav> 
      <div>
        <Link to="/"><h1>{pagetitle}</h1></Link>
      </div> 
      <div>
        <Link to="/Trolley"><FaShoppingCart /></Link>
      </div>
    </nav>
  )
}

export default Heading

注：原代码中import { React Icon } from 'react-icons/'语法错误，react-icons需要导入具体图标组件，比如上述示例中的FaShoppingCart。

修正 Trolley 组件 #

调整支付链接路径，指向路由配置的/Payment：

import { Link } from "react-router-dom"

function Trolley () {
  let pagetitle = "Page Title"
  return (
    <div>
      <div>
        <nav> 
          <div>
            <h1>{pagetitle}</h1>
          </div>
        </nav>
        <div>
          <button>
            Shop More
          </button>
          <div>
            <Link to="/Payment">Pay Now</Link>
          </div>
        </div>
      </div>
    </div>
  )
}  

export default Trolley

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