如何修复SANDBOX模板中嵌套路由切换时Drawer因双渲染重新打开的问题并设置默认打开首个嵌套路由？

Hey there! Let's break down your two issues and fix them step by step—no more double rendering causing the drawer to pop back open, and getting that first nested route to load by default.

First, let's nail down why the double rendering is happening. The most common culprit in nested route setups is incorrect parent route configuration or unnecessary component re-mounts. Here's what to check and fix:

• Remove exact from the parent route: If your parent route (for the "NEASTED" tab) has the exact prop, visiting any nested child route will unmount the parent component entirely, then re-mount it when the route resolves. That's a classic cause of double rendering and state resets (like your drawer reopening). Your parent route should look like this:

  <Route path="/neasted" element={<NeastedParentComponent />}>
    <Route path="child1" element={<Child1 />} />
    <Route path="child2" element={<Child2 />} />
  </Route>
  

  No exact here—this keeps the parent component mounted while switching between child routes.

• Wrap child components with React.memo: If your child components are triggering unnecessary re-renders, wrapping them with React.memo will prevent that unless their props change. This can cut down on extra renders that might be messing with your drawer state:

  const Child1 = React.memo(() => {
    // Your component code
  });
  

• Stabilize drawer state: Make sure your drawer's open/closed state is stored in a component that doesn't unmount when switching nested routes. If you're storing it in the parent component (which you should be, since it controls the drawer), ensure the parent isn't unmounting (see the first point). If you're using a state management library, double-check that the state isn't being reset accidentally.

Getting the first nested route to load automatically when the parent route is accessed is straightforward with React Router's built-in tools:

Option 1: Use an index Route (Recommended) #

React Router has native support for default nested routes with the index prop. Just add an index route that renders your first child component:

<Route path="/neasted" element={<NeastedParentComponent />}>
  <Route index element={<Child1 />} /> {/* Loads by default when /neasted is visited */}
  <Route path="child1" element={<Child1 />} />
  <Route path="child2" element={<Child2 />} />
</Route>

This way, when a user navigates to /neasted, the index route kicks in and renders Child1 without any extra redirects.

Option 2: Redirect from the Parent Component #

If you prefer a redirect approach, add a Navigate component in the parent component when no child route is matched:

// Inside NeastedParentComponent
import { Outlet, Navigate, useLocation } from 'react-router-dom';

const NeastedParentComponent = () => {
  const location = useLocation();
  // Redirect to first child if we're at the parent route without a subpath
  if (location.pathname === '/neasted') {
    return <Navigate to="/neasted/child1" replace />;
  }

  return (
    <>
      {/* Your tabs, drawer, and other parent UI */}
      <Outlet />
    </>
  );
};

The replace prop ensures the redirect doesn't add an extra entry to the browser history.

Quick recap: Fix the parent route's exact prop to stop unmounting, use React.memo for child components to avoid extra renders, and use an index route for the default nested page. That should resolve both your issues!

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