我有一個專案，在這個專案中我有三個頁面，第一個用于注冊，第二個用于登錄，第三個用于串列，此外還有標題。我的問題是我想隱藏“注冊和登錄”頁面的標題并僅在“串列”頁面上顯示它
我怎樣才能做到這一點？
應用程式.tsx：
import { Routes, Route } from "react-router-dom";
import SignUp from "./components/ui/registeration/signup";
import SignIn from "./components/ui/registeration/signin";
import { useDispatch } from "react-redux";
import { addUser } from "./redux-store/actions/action";
import Header from "./components/ui/header-footer/header";
import Lists from "./components/ui/todo/lists/lists";
import { makeStyles } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
header:{
paddingTop: '7rem'
},
main:{
padding: '2rem'
}
}));
const App = () => {
const classes = useStyles();
const dispatch = useDispatch();
const onAddUser = (email: string, name: string) => {
dispatch(addUser(email, name));
};
return (
<>
<div className={classes.header}>
<Header />
</div>
<div>
<main>
<Routes>
<Route path="/" element={<SignUp addUser={onAddUser} />} />
<Route path="signin" element={<SignIn />} />
<Route path="/lists" element={<Lists />} />
</Routes>
</main>
</div>
</>
);
};
export default App;
uj5u.com熱心網友回復：
理想情況下，對我來說更有意義的是從 redux 中獲取狀態，例如isAuthenticated或user在 action 之后addUser。
例如，
...
import { useDispatch, useSelector } from "react-redux";
...
const App = () => {
...
const { isAuthenticated } = useSelector((state) => state.user);
// Or user etc
return (
<>
{
isAuthenticated && (
<div className={classes.header}>
<Header />
</div>
)
...
</>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/383525.html