Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞ element, never rendered directly.

最新推荐文章于 2023-09-18 18:16:17 发布

qq_40938646

最新推荐文章于 2023-09-18 18:16:17 发布

阅读量944

点赞数

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

本文链接：https://blog.csdn.net/qq_40938646/article/details/121310640

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

错误示例

index.jsx

import React from "react";
import ReactDom from "react-dom";

import App from "./App";
import {BrowserRouter} from "react-router-dom";

ReactDom.render(<BrowserRouter><App/></BrowserRouter>,
    document.getElementById("root"))

App.jsx

import React, { Component } from 'react'
import {Link, Route} from "react-router-dom";
import Home from './Home'
import About from './About'

export default class App extends Component {
    render() {
        return (
            <div>
                {/*// 侧边 导航栏*/}
                {/*// 在React中靠路由链接实现切换组件--编写路由链接*/}
               <Link to='/about'>About</Link>
                <Link to='/home'>Home</Link>

                {/*// 中心主页面*/}
                <Route path='/about' component={About}/>
                <Route path='/home' component={Home}/>
            </div>
        )
    }
}

错误原因

版本问题
在 react-router-dom version 6之前这么写是没有问题的，但是之后的版本这样写就会出现上诉问题。

新版本写法

在这里插入代码片

import React, { Component } from 'react'
import {Link, Route, Routes} from "react-router-dom";
import Home from './Home'
import About from './About'

export default class App extends Component {
    render() {
        return (
            <div>
                {/*// 侧边 导航栏*/}
                {/*// 在React中靠路由链接实现切换组件--编写路由链接*/}
               <Link to='/about'>About</Link>
                <Link to='/home'>Home</Link>

                {/*// 中心主页面*/}
               <Routes>
                   <Route path='/about' element={<About/>}/>
                   <Route path='/home' element={<Home/>}/>
               </Routes>
            </div>
        )
    }
}