您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

基于 react-router-dom V6.x 的配置问题

基于 react-router-dom V6.x 的配置问题

如题,新人尝试从零开始配置,react-router-dom 时遇到的问题,
报错如下:

index.js?007a:15 Uncaught Error: [ProxyFacade] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

查了很久资料只知道 react-router-dom 升级到 V6 版本之后有关,
网上有以下说法,但是都没有实际效果:
1.说和 hot 有关系,但是 entry.jsx 里面去掉 hot 并没有效果
2.说和 React.Fragment 有关系,但是 home.jsx 里面修改并没有效果

代码如下:

//app.jsx
import React from 'react';
import { 
    BrowserRouter as Router, 
    Routes, 
    Route 
} from "react-router-dom";
import Home from "views/home/index.jsx";
export default function router(){
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home/>} />
            </Routes>
        </Router>
    );
}

// home.jsx
import React from 'react';
export default function Home() {
    return (
        <div style={{ padding: 20 }}>
            <h2>Home View</h2>
            <p>在React中使用React Router v6 的指南</p>
        </div>
    );
}

2022/02/15 补充:
尝试改 Route,中的 Home 引入为相同代码,相同内容的包错
尝试删除所有的 Route,但是保留 Routes 可以运行,
尝试在 Routes,添加 React.Fragment 没有问题,
尝试在 Routes, 添加 h1,相同内容的报错,
大致确定是 Routes 不支持 element?
我想办法去翻翻官方文档,和相关依赖的版本支持

javascript 2022/2/15 13:05:04 有241人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶