React路由跳转失败求助：点击按钮无法进入CreateBug页面

问题描述 #

在React项目中点击App.js内的「Create a bug」按钮时，无法跳转到CreateBug组件页面，请求协助排查路由问题。

相关代码 #

App.js #

import './App.css';
import CreateBug from './CreateBug';
import { BrowserRouter as Route, Routes } from 'react-router-dom';
import Button from '@mui/material/Button';
import { useNavigate } from "react-router-dom";

function App(history) {
  const navigate = useNavigate();
  const handleOnClick = () => navigate('/createBug');
  return (
    <div className="App">
      <Routes>
        <Route path="/createBug" element={<CreateBug />} />
      </Routes>
      <header className="App-header">
        <p>
          BUGHOUND
        </p>
        <Button variant="contained" onClick={handleOnClick()}>
          Create a bug
        </Button>
      </header>
    </div>
  );
}

export default App;

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

CreateBug.js #

import React, { useState } from 'react';

function CreateBug() {
  const [newBugDescription, setNewBugDescription] = useState;

  return (
    <div>
      New Bug Report Entry Page
      <form>
        <label htmlFor="newBugDescription">
          New Bug Description:
        </label>
        <input
          type="text"
          id="newBugDescription"
          value={newBugDescription}
          onChange={event => setNewBugDescription(event.target.value)}
        ></input>
      </form>
    </div>
  )
}

export default CreateBug

错误截图 #

问题排查与修复 #

1. 路由组件导入错误 #

App.js中导入BrowserRouter时别名错误，BrowserRouter和Route是两个独立组件，需分别导入：

// 替换原导入语句
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

2. 缺失路由上下文包裹 #

useNavigate必须在BrowserRouter上下文内才能生效，需在index.js中用BrowserRouter包裹App：

// 修改index.js的渲染部分
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

3. 按钮点击事件绑定错误 #

按钮的onClick属性直接执行了handleOnClick()，导致组件渲染时就触发跳转，需传递函数引用：

// 修复按钮点击事件
<Button variant="contained" onClick={handleOnClick}>
  Create a bug
</Button>

4. useState初始化错误 #

useState需要调用并传入初始值，否则状态未正确初始化：

// 修复CreateBug的状态初始化
const [newBugDescription, setNewBugDescription] = useState('');

额外优化：路由结构调整 #

将首页内容放入默认路由，避免原头部与CreateBug页面内容同时显示：

// 修改App.js的Routes部分
<Routes>
  <Route path="/createBug" element={<CreateBug />} />
  <Route path="/" element={
    <header className="App-header">
      <p>BUGHOUND</p>
      <Button variant="contained" onClick={handleOnClick}>
        Create a bug
      </Button>
    </header>
  } />
</Routes>

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