使用React的useNavigate时为何跳转到http://localhost:3000/?路由？

我尝试用useNavigate实现页面跳转，启动站点后点击按钮，页面只会刷新当前页，URL从http://localhost:3000变为http://localhost:3000/?，并未跳转到/list页面。

相关代码 #

提交函数：

const submitForm = async (e) => {
  const res = await fetch("http://localhost:8000/properties")
  const jsonData = await res.json()
  setProperties(jsonData)
  navigate("/list", { state: properties })
}

按钮元素：

<button onClick={() => submitForm()}>Find Properties</button>

路由配置（App.js）：

export default function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Routes>
          <Route exact path="/" element={<FormComponent />} />
          <Route path="/list" element={<ListComponent />} />
        </Routes>
      </div>
    </BrowserRouter>
  )
}

1. 阻止表单默认提交行为 #

如果按钮嵌套在<form>标签内，浏览器会默认触发表单提交，导致页面刷新，直接覆盖navigate的跳转逻辑。两种解决方式：

• 在submitForm函数开头添加e.preventDefault()，明确阻止默认行为
• 给按钮添加type="button"属性，避免触发表单提交流程

2. 修正状态传递的异步问题 #

setProperties是异步更新函数，调用后无法立即拿到最新的properties值，直接传递会导致路由状态携带旧数据。应该直接使用请求返回的jsonData作为状态参数。

修改后的代码 #

提交函数：

const submitForm = async (e) => {
  // 阻止默认提交行为，避免页面刷新
  e.preventDefault();
  
  const res = await fetch("http://localhost:8000/properties");
  const jsonData = await res.json();
  setProperties(jsonData);
  // 直接传递请求返回的最新数据
  navigate("/list", { state: jsonData });
};

按钮元素（二选一）：

// 方式一：保留默认类型，靠函数内阻止默认行为
<button onClick={(e) => submitForm(e)}>Find Properties</button>

// 方式二：设置按钮类型为button，避免触发表单提交
<button type="button" onClick={() => submitForm()}>Find Properties</button>

优化路由配置（React Router v6无需exact）：

export default function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Routes>
          <Route path="/" element={<FormComponent />} />
          <Route path="/list" element={<ListComponent />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

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