React -组织路由-发布指向新页面

Question

我想让我的SignIn组件自己渲染，不需要任何其他组件被渲染。

我怎么能做到这一点呢?

下面是我的app.js

function App() {
return (
<>
<div className="App">
<BrowserRouter>
<Navbar />
<Stack direction="row" spacing={1} justifyContent="flex-start" style={{ backgroundColor: "#f0f4f8" }} sx={{ borderTopColor: '#d9e2ec', borderTopStyle: 'solid', borderTopWidth: '0.1em' }}>
<Sidebar />
<div className='pages'>
<Routes>
<Route path="/api/jobs/:id" element={<JobSelectOne />} />
<Route path="/" element={<Home />} />
<Route path="/create" element={<AddJob />} />
<Route path="/profile" element={<Profile />} />
<Route path="/signin" element={<SignIn />} />
</Routes>
</div>
</Stack>
</BrowserRouter>
</div>
</>

Answer 1

这些是私有/受保护路由。它需要一个复杂的解释，我更喜欢添加一个链接:Private Routes。但也可以是"简短版本":

const ProtectedRoute = ({ user, children }) => {
if (!user) {
return <Navigate to="/signin" replace />;
}
return children;
};