react-router-dom 6

最新推荐文章于 2024-05-14 09:49:57 发布

Liszter

最新推荐文章于 2024-05-14 09:49:57 发布

阅读量861

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_39198394/article/details/122398464

版权

react 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了React Router v6版本的重要变更，特别是关于如何正确使用`Route`组件的新语法。新版本中，`Route`必须作为`Routes`组件的子元素，并且使用`element`属性来指定对应的组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错： A <Route> is only ever to be used as the child of <Routes>

新版本写法改了：

之前版本的 `Route` 需要被 `Routes` 包裹，之前的 `component` 变成了 `element={<Home />} `

import React from "react";
import './index.css'
import { Link, Route, Routes, BrowserRouter } from 'react-router-dom'

import About from "./components/About";
import Home from "./components/Home";


export default class App extends React.Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <Link to="/home">to Home</Link>
          <hr></hr>
          <Link to="/about">about</Link>
          <hr></hr>

          <div>
            {/* 注册路由 */}
            <Routes>
              <Route path="/home" element={<Home />} />
              <Route path="/about" element={<About />} />
            </Routes>
          </div>
        </BrowserRouter>
      </div>
    )
  }
}