React路由无响应无法跳转问题求助（附App.js代码）

你的代码存在几个关键问题，导致路由无法正常工作：

1. 无限递归渲染 #

你在根路由/的element里渲染了<App />，这会导致App组件不断调用自身，陷入无限循环，浏览器会因此卡住，路由自然无法正常响应。

2. Route属性错误 #

react-router-dom v6中，Route组件指定路径的属性是path，而非to——to是<Link>组件的属性。

3. 组件渲染方式错误 #

Contact组件在element中需要以JSX形式渲染（<Contact />），直接传递组件本身不会触发组件实例化，页面无法显示对应的内容。

4. 非路由内容位置错误 #

<h1>This is Home</h1>放在了<BrowserRouter>之外，这部分内容不受路由控制，无论切换到哪个路径都会固定显示。

修复后的代码示例： #

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Contact from './pages/Contact'
import Error404 from './pages/Error404'

// 单独定义Home组件
const Home = () => <h1>This is Home</h1>

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Contact" element={<Contact />} />
        <Route path="*" element={<Error404 />} />
      </Routes>
    </BrowserRouter>
  )
}

额外建议： #

如果需要添加页面导航，使用<Link>组件（需从react-router-dom导入）实现无刷新跳转，示例如下：

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

// 在合适位置添加导航栏
<nav>
  <Link to="/">Home</Link>
  <Link to="/Contact">Contact</Link>
</nav>

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