匹配的根路由"/"无元素或组件，页面空白问题求助

问题根源 #

你的代码沿用了React Router v5的写法，但当前环境是React Router v6——v6彻底废弃了render和exact这两个属性，改用element指定路由渲染内容，而且默认就是精准匹配，不需要exact。这就是路由匹配到了但没有元素渲染、页面空白的原因。

修复后的代码 #

把render替换成element，去掉exact，同时简化布尔判断：

<Routes>
    <Route
        path="/"
        element={
            <>
                <Search
                    searchUsers={this.searchUsers}
                    clearUsers={this.clearUsers}
                    showClear={users.length > 0}
                    setAlert={this.setAlert}
                />
                <Users loading={loading} users={users} />
            </>
        }
    />
</Routes>

注：showClear={users.length > 0 ? true : false}可以直接写成showClear={users.length > 0}，逻辑完全一致，代码更简洁。

额外提示 #

React Router v6的<Route>组件仅支持element属性，v5里的component、render、children都已不再适用，改成v6的标准写法后，首页就能恢复到未使用路由时的正常状态。

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