react-router-dom@6.4.1 不渲染组件，也不记录任何错误

Question

react-router-dom@6.4.1没有渲染组件。

我已经有一段时间没有编写 React 代码了。 我正在尝试使用react-router但似乎出了点问题。 没有发出错误，但组件不会呈现。 react-router的更新如此之多，很难跟上。

链接到github 回购

这是我的根文件的示例。

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import './index.css';
import {
  createBrowserRouter,
  RouterProvider,
  Route,
} from "react-router-dom";
import { Calendar, Message, Settings, Team } from './components';
import ErrorPage from "./error-page";
import Aside from './root';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Aside />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: "/messages",
        element: <Message />
      },
      {
        path: "/team-members",
        element: <Team />
      },
      {
        path: "/calendar",
        element: <Calendar />
      },
      {
        path: "/settings",
        element: <Settings />
      }
    ]
  }
]);

const container = document.getElementById('root')!;
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  </React.StrictMode>
);

Answer 1

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

您可以从这里阅读： https://reactrouter.com/en/main/components/outlet

Answer 2

今天我遇到了同样的麻烦，这里是解决方案：

Go 到你的主容器，你想在那里看到孩子。 然后

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

然后在要渲染项目的<div>中插入<Outlet />组件。

你的代码：如果你想呈现<Team/>你应该导入<Outlet/>到你想看到<Team/>的组件。

import React from 'react';
import { Link, Outlet } from 'react-router-dom';

const Aside = () => {
    return ( 
        <div>
            Welcome to Your personal gym
            <Link to='/login'>Log In</Link>
            <Link to='/registration'>Sign In</Link>
            <Outlet/>
        </div>
     );
}
 
export default Aside;

Answer 3

检查您的 css 布局，您的组件已渲染但样式不正确 [1]： https://i.stack.imgur.com/hdx4I.png