javascript - React Router v6 错误：道具类型失败：道具“位置”在“路由器”中标记为必需，但其值为“未定义”

Question

我有一个非常基本的设置，尝试反应路由器 v6。但是当我点击“回家”按钮时，我总是收到标题中提到的错误消息。我怎样才能解决这个问题？

应用程序.js

render({AppRoutes})

AppRoutes.js

import { BrowserRouter, Routes, Route, HashRouter } from 'react-router-dom';
import React from 'react';
import DefaultComponent from './scenes/Default/Default2';
import TestComponent from './scenes/Default/TestComponent';

const AppRoutes = (
<HashRouter>
  <Routes>
    <Route path="/" element = {<DefaultComponent/>}>
      <Route path="test" element={<TestComponent/>}/>
    </Route>
  </Routes>
</HashRouter>
);
export default AppRoutes;

DefaultComponent.js

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

function DefaultComponent() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/test');
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}
export default DefaultComponent;

测试组件.js

import React from 'react';

function TestComponent (){
  return (
    <h1>This is a test!</h1>
  );
}
export default TestComponent;

标签： javascriptreactjsreact-router