使用React Router路由后组件无法渲染的问题求助

问题 #

开发问卷应用时，使用React Router实现填写后跳转功能，但包含Route的组件无法渲染，普通组件可正常显示。相关代码如下：

主应用代码 #

import Intro from "./pages/intro.js"

function App() {
  return (
    <div className="App">
      <Intro/>
    </div>
  );
}

export default App;

带Route的组件代码 #

import { Routes, useNavigate, Route, Router } from 'react-router-dom';
import B1 from "./B1.js"

function Intro() {
  const navigate = useNavigate();

  const navigateToB1 = () => {
    navigate('./B1.js');
  };

  return (       
    <form>
      <h1>Walcome!</h1>
      <p><b>plase enter your name:</b></p>
      <label>
        Name:
        <input type="text" name="name" />
      </label>
      <input
        type="submit"
        id="sumbit"
        value="Submit"
        onClick={navigateToB1}
      />
    
      <Router>
        <Routes>
          <Route path="./B1.js" element={<B1 />} />
        </Routes>
      </Router>
    </form>
  );
}

export default Intro;

错误原因 #

1. Router上下文范围错误：useNavigate需要在Router上下文环境中调用，但代码里Router被放在Intro组件内部，useNavigate在组件初始化时就执行，此时Router还未渲染，导致上下文不存在，路由功能完全失效。
2. 路由路径格式错误：Route的path和navigate的参数应该是URL路由路径（如/b1），而非文件路径（./B1.js）。
3. 表单默认行为未阻止：submit按钮点击会触发表单提交刷新页面，打断路由跳转逻辑。
4. Router类型使用错误：直接使用底层的Router组件需要手动传入history对象，日常开发应使用BrowserRouter自动处理浏览器历史记录。

修正方案 #

方案一：调整路由结构到App组件（推荐） #

这种方式符合React Router最佳实践，将路由配置集中在顶层组件。

修改后的App.js

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Intro from "./pages/intro.js";
import B1 from "./pages/B1.js";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Routes>
          <Route path="/" element={<Intro />} />
          <Route path="/b1" element={<B1 />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

修改后的Intro.js

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

function Intro() {
  const navigate = useNavigate();

  const navigateToB1 = (e) => {
    e.preventDefault(); // 阻止表单默认提交刷新
    navigate('/b1'); // 使用正确的路由路径
  };

  return (       
    <form>
      <h1>Welcome!</h1>
      <p><b>please enter your name:</b></p>
      <label>
        Name:
        <input type="text" name="name" />
      </label>
      <input
        type="submit"
        id="submit"
        value="Submit"
        onClick={navigateToB1}
      />
    </form>
  );
}

export default Intro;

方案二：调整Intro组件内的Router位置 #

如果要在Intro组件内保留路由配置，需确保Router包裹整个组件，且useNavigate在Router上下文内：

import { Routes, useNavigate, Route, BrowserRouter } from 'react-router-dom';
import B1 from "./B1.js"

function Intro() {
  return (       
    <BrowserRouter>
      <form>
        <h1>Welcome!</h1>
        <p><b>please enter your name:</b></p>
        <label>
          Name:
          <input type="text" name="name" />
        </label>
        <SubmitButton />
    
        <Routes>
          <Route path="/b1" element={<B1 />} />
        </Routes>
      </form>
    </BrowserRouter>
  );
}

// 抽离使用useNavigate的逻辑为子组件，确保在BrowserRouter上下文内
function SubmitButton() {
  const navigate = useNavigate();
  
  const navigateToB1 = (e) => {
    e.preventDefault();
    navigate('/b1');
  };
  
  return (
    <input
      type="submit"
      id="submit"
      value="Submit"
      onClick={navigateToB1}
    />
  );
}

export default Intro;

这种方式虽可行，但不如方案一清晰，不推荐在组件内部嵌套Router，易导致上下文混乱。

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