React Router Dom v6 中的嵌套路由

Question

在反应中。 我有一个名为“父组件”的组件。它有两个部分。固定并显示在屏幕右侧和屏幕左侧的组件是动态组件，并且会随着“路线”屏幕的变化而变化。我遇到的问题是左侧组件显示在右侧组件下方，而不是旁边

从“react”导入React 从 './Component1' 导入 Component1 从“./Component2”导入组件2 从 'react-router-dom' 导入 { Outlet }

function AllComponents() {
    return (
        <>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
                <h1> Parent Component </h1>
            </div>

            <div style={{display: 'flex', justifyContent: 'flex-end'}}>
                {/* //Fixed Component On Right Side of Screen */}
                <Component1 />
            </div>

            <Outlet />

        </>
    )
}

export default AllComponents

import { BrowserRouter, Routes, Route } from "react-router-dom";
import AllComponents from "./Components/AllComponents";
import Component2 from "./Components/Component2";
import Component3 from "./Components/Component3";
import Component4 from "./Components/Component4";

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>

          <Route path="/parent" element={<AllComponents />}>
            <Route path='component2' element={<Component2 />} />
            <Route path='component3' element={<Component3 />} />
            <Route path='component4' element={<Component4 />} />
          </Route>

        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App

import React from 'react'
import { Link } from 'react-router-dom'

function Component1() {
    return (
        <>
            <div>
                <Link to='/parent/component2'> <h1> Go To Component2 </h1> </Link>
                <Link to='/parent/component3'> <h1> Go To Component3 </h1> </Link>
                <Link to='/parent/component4'> <h1> Go To Component3 </h1> </Link>
            </div>
        </>
    )
}

export default Component1

Answer 1

看起来罪魁祸首是你如何设置弹性盒的。您的 Component1 和 Outlet 均包装在各自的柔性容器中，使它们垂直堆叠。

要将它们并排放置，只需执行以下操作：

1. 将 Outlet 和 Component1 包裹在一个父 div 中，并使用 display: flex。
2. 在这个父级中，将 Outlet 包装在具有 flex: 1 样式的 div 中，使其占据所有可用空间。
3. 对于 Component1，将其包裹在一个带有 flexShrink: 0 的 div 中，以确保它不会收缩并保持其宽度。

这是 AllComponents 的修订版本：

function AllComponents() {
    return (
        <>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
                <h1> Parent Component </h1>
            </div>

            <div style={{display: 'flex'}}>
                <div style={{flex: 1}}>
                    <Outlet />
                </div>
                <div style={{flexShrink: 0}}>
                    <Component1 />
                </div>
            </div>
        </>
    )
}

尝试一下，看看是否有帮助！当然，请确保其他组件（如组件 2、组件 3 和组件 4）的内容不会溢出或发生任何其他事情。

希望能解决您的问题！