我收到此警告，除了 App.js 中包含“默认页面内容}”的“/”之外，我看不到我的路线。我如何重写包含其他路线的代码？

位置“/admin”处的匹配叶路由没有元素。这意味着默认情况下它将呈现一个空值，从而导致“空”页面

我在用着 ： “反应”：“^17.0.2”， "react-dom": "^17.0.2", "react-router-dom": "^6.0.2",

App.js

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Switch,Routes, Route,Swit } from 'react-router-dom';

import MasterLayout from '../src/assets/layouts/admin/MasterLayout'

function App() {
  return (
    <div className="App">
 <Router>
      
        <Routes>
        <Route path="/" element={<div>Default Page Content</div>}/>
        <Route  path="/admin" name="Admin" render={(props) => <MasterLayout {...props} />}/>  
        </Routes>
      
       
    </Router>

    </div>
  );
}

export default App;

Route.js

import Dashboard from '../assets/components/admin/Dashboard';
import Profile from '../assets/components/admin/Profile';


const routes = [
{path:'/admin',exact:true,name:'Admin'},
{path:'/admin/dashboard',exact:true,name:'Dashboard',component: Dashboard},
{path:'/admin/profile',exact:true,name:'Profile',component: Profile},

];


export default routes;

MasterLayout.js

import React from 'react';
import { Navigate } from 'react-router-dom';

import { BrowserRouter as Router, Switch, Routes, Route, Swit } from 'react-router-dom';

import '../../admin/js/scripts.js'
import '../../admin/css/styles.css'

import Navbar from './Navbar.js';
import Sidebar from './Sidebar.js';
import Footer from './Footer.js';
import routes from '../../../routes/routes';



const MasterLayout = () => {

    return (
        <div className="sb-nav-fixed">
            <Navbar />
            <div id="layoutSidenav">
                <div id="layoutSidenav_nav">
                    <Sidebar />
                </div>
                <div id="layoutSidenav_content">
                    <main>
                    <Router>
                        <Routes>
                            {routes.map((route, idx) => {

                                return (

                                    route.component && (

                                        <Route

                                            key={idx}
                                            path={route.path}
                                            exact={route.exact}
                                            name={route.name}
                                            render={(props) => (
                                                <route.component {...props} />
                                            )}
                                        />
                                    )

                                )

                            })}
                        </Routes>
                        </Router>
                        <Navigate from="/admin" to="/admin/dashboard"/>

                    </main>

                    <Footer />
                </div>
            </div>

        </div>



    )
}

export default MasterLayout;

#仪表板.js#

import React from 'react'

function Dashboard() {

    return (
        <h1>I am dashboard</h1>
    );

}

export default Dashboard;

Profile.js

import React from 'react'

function Profile() {

    return (
        <h1>I am Profile</h1>
    );

}

export default Profile;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: 
reportWebVitals();

React Router 6 为我们提供了一个非常强大的功能（嵌套路由）。这使我们能够在浏览器中更改不同路由/链接的 URL，而不是替换整个页面，仅替换新选项卡/链接的内容。 为了在这里使用嵌套路由，您可以简单地删除 Routes/routes.js 文件，也从 App.js 中删除导入语句，并将 App.js 文件更改为以下内容

import React from 'react';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';

import MasterLayout from './layouts/admin/MasterLayout';
import Dashboard from './components/admin/Dashboard';
import Profile from './components/admin/Profile';

    function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
        <Route path="/admin" element={<MasterLayout />} > 
        <Route path='/admin/dashboard' element={<Dashboard />}/>
        <Route path='/admin/profile' element={<Profile />}/>
        </Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

然后按以下顺序将 Outlet 添加到 MasterLayout.js 文件中，以使其能够渲染并用匹配的嵌套路由内容替换其内容。

import React from 'react';
import {Outlet, Navigate} from 'react-router-dom';
import '../../assets/admin/css/styles.css';
import '../../assets/admin/js/scripts.js';

import Footer from './Footer';
import Navbar from './Navbar';
import Sidebar from './Sidebar';



const MasterLayout = ()=>{
    return (
        <div className="sb-nav-fixed">
            <Navbar/>

            <div id="layoutSidenav">
                <div id="layoutSidenav_nav">
                    <Sidebar/>
                </div>

                <div id="layoutSidenav_content">
                <main>
                    <Outlet/>
                    <Navigate from="admin" to="/admin/dashboard"/> 

                </main>
                <Footer/>
                </div>
            </div>    
        </div>

    );
}

export default MasterLayout;

我希望这对我们这些使用 React-router-dom v-6 及以上版本的人有所帮助。