Hey there! Let's sort out this sidebar layout problem—it looks like the minimal sidebar component you're using is defaulting to a block-level element that takes up the entire page width, forcing your main content to sit below it. Neither of your current layout approaches set up a side-by-side arrangement, so here are a couple of reliable solutions:

1. Use Flexbox (Most Common Approach) #

Flexbox is perfect for creating side-by-side layouts. Wrap your sidebar and main content in a container, then use flex properties to control their width and positioning.

Step 1: Update Your Component Structure #

return (
  <div className="app-container">
    {/* Add a custom class to target the sidebar */}
    <Sidebar className="custom-sidebar" />
    <main className="main-content">
      <Router>
        <Redirect path='/user-portal' to='/user-portal/dashboard' exact />
        <Route path='/user-portal/dashboard' component={Dashboard} exact />
      </Router>
    </main>
  </div>
)

Step 2: Add CSS for Flexbox Layout #

/* Container to hold sidebar and main content */
.app-container {
  display: flex;
  min-height: 100vh; /* Make the container fill the viewport height */
}

/* Style the sidebar to a fixed width */
.custom-sidebar {
  width: 250px; /* Adjust this value to your preferred sidebar width */
  flex-shrink: 0; /* Prevent the sidebar from being squeezed */
  /* Optional: Add background or border to distinguish the sidebar */
  background-color: #f8f9fa;
  border-right: 1px solid #e9ecef;
}

/* Make main content take up remaining space */
.main-content {
  flex: 1; /* Occupies all remaining width in the container */
  padding: 1.5rem; /* Add padding for better spacing */
  overflow-y: auto; /* Allow scrolling if content overflows */
}

2. Use CSS Grid (Alternative Clean Approach) #

If you prefer Grid, it's even more concise. The container will define two columns: one for the sidebar, one for the main content.

CSS for Grid Layout #

.app-container {
  display: grid;
  grid-template-columns: 250px 1fr; /* Fixed sidebar width, flexible main content */
  min-height: 100vh;
}

/* Reuse the .custom-sidebar and .main-content styles from above */

Why Your Previous Approaches Didn't Work #

• 写法一: You placed <Sidebar /> and <Router /> as sibling elements. By default, block-level elements stack vertically, so the router content ended up below the sidebar.
• 写法二: You nested the router inside the sidebar. Unless the sidebar component is designed to render children in a side-by-side layout, this just puts the router content inside the sidebar's full-width block, not next to it.

Bonus: Override Component Default Styles #

If the sidebar has built-in styles that force full width, override them with your custom class. For example:

.custom-sidebar {
  width: 250px !important; /* Use !important only if needed—prefer higher specificity instead */
}

内容的提问来源于stack exchange，提问作者BranOIE