错误： <Route> 只能用作 <Routes> 元素的子元素，不能直接渲染。请将您的 <Route> 包裹在 <Routes> 中

Question

    import Home from './pages/Home';
import { BrowserRouter as Routes, Route} from 'react-router-dom';
function App() {
  return ( 
    <Routes>
    <div className="max-w-screen-md mx-auto pt-20">
     <Route exact path="/" component={Home} />
    </div>
    </Routes>
    );
}
export default App;

我已经做了很多研究并安装了许多 npm 基本代码，但面临同样的问题（错误：A 只能用作元素的子元素，从不直接渲染。请将你的包装在 a 中）。

发自内心的感谢和爱护先进。

Answer 1

import { BrowserRouter as Routes, Route} from 'react-router-dom';

您正在导入 BrowserRouter 并将其重命名为 Routes。这不是错误消息中提到的组件。相反，您需要导入 BrowserRouter并导入 Routes 并使用它。

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <div className="max-w-screen-md mx-auto pt-20">
        <Routes>
          <Route exact path="/" component={Home} />
        </Routes>
      </div>
    </BrowserRouter>
  )
}