Javascript 没有与REACTRUTERDOM v6中的位置匹配的路由

我正在迁移到react-router-dom V6.我在组件中嵌套了路由，在v5中，它工作得很好.但现在它不起作用了，因为它总是说没有与位置匹配的路由. 我想把ROUTE放在我的Layout组件中，然后当组件命中时，它将调用ROUTE INTERNAL.这不管用.我曾经在v5中使用Switch和BrowserRouter，一切都很好.我想不出哪里出了问题.

以下是我的代码:

App.js

import React from "react";
import RootRouters from "./components/routers/RootRouters";
import { BrowserRouter as Router } from "react-router-dom";
import "./App.css";

function App() {
    return (
        <Router>
            <div className="App">
                <RootRouters />
            </div>
        </Router>
    );
}

export default App;

RootRouters:

import React from "react";
import { Route, Routes } from "react-router-dom";
import Login from "../auth-page/login";
import Home from "../home/home";
import SignUp from "../auth-page/sign-up";
import AdminLogin from "../../pages/admin/Login";
import Layout from "../../components/admin/layout/Layout";

const RootRouters = () => {
    return (
        <Routes>
            <Route path="/home" element={<Home />} />
            <Route path="/login" element={<Login />} />
            {/* <Route path="/" element={<Home />} /> */}
            <Route path="/register" element={<SignUp />} />
            <Route path="/admin/login" element={<AdminLogin />} />
            <Route element={<Layout />} />
        </Routes>
    );
};

export default RootRouters;

布局:

import React, { useEffect } from "react";
import "./layout.css";
import Sidebar from "../sidebar/Sidebar";
import TopNav from "../topnav/TopNav";
import AdminRoutes from "../../routers/AdminRouters";
import { BrowserRouter, Route } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import ThemeAction from "../../../redux/actions/ThemeAction";

const Layout = () => {
    const themeReducer = useSelector((state) => state.ThemeReducer);

    const dispatch = useDispatch();

    useEffect(() => {
        const themeClass = localStorage.getItem("themeMode", "theme-mode-light");

        const colorClass = localStorage.getItem("colorMode", "theme-mode-light");

        dispatch(ThemeAction.setMode(themeClass));

        dispatch(ThemeAction.setColor(colorClass));
    }, [dispatch]);

    return (
        <Route
            render={(props) => (
                <div className={`layout ${themeReducer.mode} ${themeReducer.color}`}>
                    <Sidebar {...props} />
                    <div className="layout__content">
                        <TopNav />
                        <div className="layout__content-main">
                            <AdminRoutes />
                        </div>
                    </div>
                </div>
            )}
        />
    );
};

export default Layout;

管理路由:

import React from "react";
import { Route, Routes } from "react-router-dom";
import Dashboard from "../../pages/admin/Dashboard";
import Customers from "../../pages/admin/Customers";
import Products from "../../pages/admin/Products";
import NewDocument from "../../pages/admin/document/NewDocument";
import DetailDocument from "../../pages/admin/document/DetailDocument";
import EditDocument from "../../pages/admin/document/EditDocument";

const AdminRoutes = () => {
    return (
        <Route>
            <Route path="/admin/documents/new" component={NewDocument} />
            <Route path="/admin/documents/detail" component={DetailDocument} />
            <Route path="/admin/documents/update" component={EditDocument} />
            <Route path="/admin/customers" component={Customers} />
            <Route path="/admin/products" component={Products} />
            <Route path="/home" component={Dashboard} />
        </Route>
    );
};

export default AdminRoutes;