Javascript 为什么我的Reaction组件不能使用createBrowserRouter呈现

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

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

reportWebVitals();

import React from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Skills from './Skills'

const router = createBrowserRouter([
  {
    path:'/',
    element: <Home />,
    children: [
      {
        path: 'about',
        element: <About />
      },
      {
        path: 'skills',
        element: <Skills />
      }
    ],
  
  },
]);

function App() {
  return (
    <RouterProvider router={router} />
  );
}

export default App;

import { Outlet } from 'react-router-dom';

const Home = () => (
  <>
    <Navbar />
    ...
    <Outlet /> // <-- nested routes render content here
  </>
);

const router = createBrowserRouter([
  {
    path:'/',
    element: <Home />,
    children: [
      { path: 'about', element: <About /> },
      { path: 'skills', element: <Skills /> }
    ],
  },
]);

import { Outlet } from 'react-router-dom';

const AppLayout = () => (
  <>
    <NavBar />
    <Outlet />
  </>
);

const Home = () => (
  <>
    ...
  </>
);

const router = createBrowserRouter([
  {
    path:'/',
    element: <AppLayout />,
    children: [
      { index: true, element: <Home /> },
      { path: 'about', element: <About /> },
      { path: 'skills', element: <Skills /> }
    ],
  },
]);

Javascript相关问答推荐

仅在React和JS中生成深色

积分计算和 colored颜色 判断错误

JavaScript文本区域阻止KeyDown/KeyUp事件本身上的Alt GR +键组合

materialized - activeIndex返回-1

如何在Angular中插入动态组件

Redux查询多个数据库Api reducerPath&

setcallback是什么时候放到macrotask队列上的？

如何从隐藏/显示中删除其中一个点击？

简单的PayPal按钮集成导致404错误

可更改语言的搜索栏

类构造函数忽略Reaction Native中的可选字段，但在浏览器中按预期工作

查询参数中的JAVASCRIPT/REACT中的括号

如何使用JS创建一个明暗功能按钮？

OpenAI转录API错误请求

expo 联系人：如果联系人的状态被拒绝，则请求访问联系人的权限

ngOnChanges仅在第二次调用时才触发

本地损坏的Java脚本

在范围数组中查找公共(包含)范围

使用VITE开发服务器处理错误

在执行console.log(new X())时记录一个字符串