Reputation:
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