React Route无法渲染报错Element type is invalid问题求助

你遇到的报错是React Router使用场景下的常见错误，核心原因和修复方法如下： #

核心错误点 #

1. 重复嵌套BrowserRouter：整个React应用只需要在最外层声明一次BrowserRouter即可，你在Layout.jsx和Routes.jsx中各写了一次，多层嵌套会导致路由上下文异常，直接触发类型错误。
2. 路由参数写法不规范：/catalog:slug的写法缺少参数分隔斜杠，正确写法为/catalog/:slug。
3. 若你使用的是React Router v6及以上版本，还存在版本不兼容问题：v6已移除Switch组件、component/render属性，且官方新增了内置Routes组件，和你自定义的Routes组件重名会引发冲突。

React Router v5 修复方案 #

修改Routes.jsx代码 #

删除多余的Router声明，调整路由参数写法：

import React from 'react'
import { Route, Switch } from "react-router-dom"
import Home from '../pages/Home';
import Catalog from '../pages/Catalog';
import Cart from "../pages/Cart";
import Product from '../pages/Product';

const Routes = () => {
    return (
        <Switch>
            <Route path='/' exact component={Home}/>
            <Route path='/catalog/:slug' component={Product}/>
            <Route path='/catalog' component={Catalog}/>
            <Route path='/cart' exact component={Cart}/>
        </Switch>
    )
}
export default Routes

校验组件导入导出 #

检查所有页面组件（Home、Catalog、Cart、Product、Header）的导出方式和导入方式匹配：如果是export default导出，导入时不能加花括号；如果是export const XXX命名导出，导入时需要加花括号，两者混用是触发该报错的常见原因。 #

React Router v6 修复方案 #

1. 重命名路由组件避免重名 #

将routes/Routes.jsx重命名为AppRoutes.jsx，修改代码如下：

import React from 'react'
import { Route, Routes } from "react-router-dom"
import Home from '../pages/Home';
import Catalog from '../pages/Catalog';
import Cart from "../pages/Cart";
import Product from '../pages/Product';

const AppRoutes = () => {
    return (
        <Routes>
            <Route path='/' element={<Home />}/>
            <Route path='/catalog/:slug' element={<Product />}/>
            <Route path='/catalog' element={<Catalog />}/>
            <Route path='/cart' element={<Cart />}/>
        </Routes>
    )
}
export default AppRoutes

2. 修改Layout.jsx代码 #

删除多余的Route包裹，调整组件导入路径：

import React from 'react'
import { BrowserRouter as Router } from 'react-router-dom'
import Header from "./Header"
import AppRoutes from '../routes/AppRoutes'

const Layout = () => {
    return (
        <Router>
            <div>
                <Header />
                <div className="container">
                    <div className="main">
                        <AppRoutes />
                    </div>
                </div>
            </div>
        </Router>
    )
}
export default Layout

内容的提问来源于stack exchange，提问作者ni ni