user7075574
user7075574

Reputation:

React Router 6 duplicates content on nested routes that uses Outlet

I have the following routes:

<Suspense fallback={<Loading />}>
    <PrivateRoute // Returns a <Route {...props} /> or redirects using <Navigate {...settings}/>
        authenticated={authenticated(authentication)}
        path="dashboard"
        element={<Dashboard />}
    >
        <Route path="one" element={<p>One</p>} />

        <Route path="two" element={<p>Two</p>} />
    </PrivateRoute>
</Suspense>

And the following dashboard:

const Dashboard = () => {
  return (
    <Grid container direction="column" justify="center" alignItems="stretch">
      <Grid item xs={12} sm={12} md={12} lg={12}>
        <Outlet />
      </Grid>

      <Grid item xs={12} sm={12} md={12} lg={12}>
        Test
      </Grid>
    </Grid>
  );
};

Private route:

const PrivateRoute = ({ authenticated, state, ...rest }) => {
  return authenticated ? (
    <Route {...rest} />
  ) : (
    <Navigate
      to="/login"
      replace
      state={
        state
          ? state
          : {
              message: "...",
              origin: window.location.pathname,
            }
      }
    />
  );
};

If I access /dashboard this renders "Test" twice, if I access /dashboard/one it renders the </Outlet> component and "Test" twice, but if I remove </Outlet> it renders "Test" once... I'm not sure what is making it renders twice, I have seen this example and everything looks ok

Upvotes: 1

Views: 549

Answers (0)

Related Questions