React应用按钮路由跳转失效、页面不渲染问题求助

你的代码存在4个核心错误，对应所有异常现象：

• react-router-dom v6 版本中，Route组件不能直接单独渲染，必须嵌套在Routes组件内，且整个路由相关组件必须被BrowserRouter（客户端路由常用容器）包裹。缺少这层包裹时，整个组件树会渲染失败，这就是你添加Route代码后页面空白、控制台无明显报错的核心原因。
• 你用原生JS的window.location.href='test'做跳转属于硬刷新跳转，会完全绕过React Router的客户端路由状态管理，哪怕路由配置正确，这种写法要么触发整页重载，要么无法触发路由匹配更新组件。
• Test.js的组件写法不合法：React组件必须是返回JSX的函数，你直接导出JSX片段不属于合法组件，路由匹配后无法正常渲染。
• 路由路径需要写绝对路径，相对路径test会导致路径匹配逻辑异常，必须写为/test。

修复步骤 #

1. 前置检查：确认项目已安装react-router-dom依赖，未安装则先在项目目录执行命令安装：

npm install react-router-dom

2. 修正Test.js的组件写法，改为合法的函数组件：

// test/Test.js
export default function Test() {
  return <h1>Hello React!</h1>
}

3. 修正index.js的路由配置，使用React Router官方提供的导航钩子做跳转，补全必须的路由容器组件：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
// 引入路由必须的容器、匹配组件和导航钩子
import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';
import Test from './test/Test';
// 如果你用的是原生按钮不需要引入，用第三方UI库的Button替换对应引入路径即可
import Button from '你的Button组件实际引入路径';

// 跳转按钮需要单独抽为Router容器的子组件，才能正常调用路由钩子
function JumpButton() {
  const navigate = useNavigate();
  return <Button onClick={() => navigate('/test')}>Click me</Button>
}

const appElement = (
  <BrowserRouter>
    {/* 全局可显示的跳转按钮 */}
    <JumpButton />
    <Routes>
      {/* 路由路径写绝对路径，element传入合法的组件标签 */}
      <Route path="/test" element={<Test />} />
      {/* 补充根路径匹配，避免访问localhost时页面空白 */}
      <Route path="/" element={<div>首页</div>} />
    </Routes>
  </BrowserRouter>
)

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(appElement);

注意：useNavigate等路由钩子只能在BrowserRouter包裹的子组件内部调用，直接在根组件外层调用会抛出上下文不存在的错误。

修复后效果 #

• 访问根路径localhost/时会正常渲染跳转按钮，不会出现空白
• 点击按钮会在当前标签页无刷新跳转到localhost/test，正常显示Test组件的「Hello React!」内容
• 直接在地址栏输入localhost/test也能正常匹配路由，渲染对应页面

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