React项目使用自定义Layout Route时提示不是<Route>组件如何解决？

问题原因 #

你遇到的报错是React Router v6 版本的规则限制导致的，核心问题有两个：

• <Routes> 组件的直接子元素只能是官方提供的 <Route> 组件或者 <React.Fragment>，你自定义的 NoNavbarLayoutRoute、NavbarLayoutRoute 本身不是官方 <Route> 组件，哪怕内部返回了 <Route> 也不符合语法要求。
• 你封装自定义路由时使用的 render 属性是 React Router v5 的写法，v6 已经完全移除了 render、component 这类属性，所有路由组件统一通过 element 属性传入。

解决方案 #

推荐用v6原生支持的嵌套路由方案实现布局复用，改动很小：

步骤1：修改布局组件，添加路由出口

首先从 react-router-dom 导入 <Outlet> 组件，放在布局中需要渲染子路由页面的位置：

import React from "react";
import { Outlet } from "react-router-dom";

const NoNavbarLayout = () => (
    <div className="login-layout">
        <p>No navbar</p>
        {/* 子路由对应的页面会渲染在Outlet位置 */}
        <Outlet />
    </div>
);

export default NoNavbarLayout;

NavbarLayout 组件做同样的修改即可。

步骤2：调整App中的路由写法

不需要再自定义布局路由组件，直接用嵌套路由关联布局和页面：

class App extends Component {
    render() {
        return (
            <div>
                <BrowserRouter>
                    <Routes>
                        {/* 无导航栏的路由组 */}
                        <Route element={<NoNavbarLayout />}>
                            <Route path="/bossHome" element={<BossHomePage />} />
                            {/* 后续其他需要无导航栏的路由都可以加在这里 */}
                        </Route>
                        {/* 有导航栏的路由组 */}
                        <Route element={<NavbarLayout />}>
                            <Route path="/home" element={<Home />} />
                            {/* 后续其他需要带导航栏的路由都可以加在这里 */}
                        </Route>
                    </Routes>
                </BrowserRouter>
            </div>
        );
    }
}

轻量替代方案 #

如果你的路由数量很少，不想改布局组件，也可以直接在对应路由的element中套入布局，写法更简单：

<Routes>
  <Route path="/bossHome" element={<NoNavbarLayout><BossHomePage /></NoNavbarLayout>} />
  <Route path="/home" element={<NavbarLayout><Home /></NavbarLayout>} />
</Routes>

这种写法不需要修改原有布局组件的逻辑，直接沿用你之前写的接收children的布局代码即可。

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