在学习React路由中遇到的问题:
Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
经过半天的折腾,最终发现是react-router-dom版本的问题,你可以去package.json中查看react-router-dom的版本,如果是6.x.x,那么你多半会遇到这个问题。
以下是解决方法:
初始报错代码如下:
// 导入组件:
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const First = () => <p>页面一的内容</p>;
// 使用Router包裹整个应用
const App = () => (
<Router>
<div>
<h1>React路由基础</h1>
{/* 指定路由入口 */}
<Link to="/first"> 页面一 </Link>
{/* 指定路由出口 */}
<Route path="/first" component={First}></Route>
</div>
</Router>
);
解决方案:
step1:
导入组件中加入routes;
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
step2:
使用routes包裹route;
<Routes>
<Route path="/first" component={First}></Route>
</Routes>
运行:
然而又出现了另一个问题:在点击链接的时候无法跳转
解决办法:
将component改为element,组件使用标签形式的写法:
<Route path="/first" element={<First />}></Route>
完整代码如下:
// 导入组件:
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
const First = () => <p>页面一的内容</p>;
// 使用Router包裹整个应用
const App = () => (
<Router>
<div>
<h1>React路由基础</h1>
{/* 指定路由入口 */}
<Link to="/first"> 页面一 </Link>
{/* 指定路由出口 */}
<Routes>
<Route path="/first" element={<First />}></Route>
</Routes>
</div>
</Router>
);
点击链接可以显示内容了
至此,问题解决。