javascript - React 和 Material UI 的页面移动

Question

我的想法是<LandingPage>有<Top>它会随着用户点击进度而改变。

<Top>有pageState , 然后通过单击 First 中的按钮更改它和 Second页

这是正确的做法吗？以及如何更改 pageState的 Top通过单击 First 中的按钮和 Second页 ??

这些是我目前所做的

export default function LandingPage(props) {
  return (
    <div>
        <Header></Header>    
        <Top></Top>
        <Footer></Footer>
      </div>
    );
  
}

const Top = (props) =>{
  const [pageState, setPageState] = useState([]);
  if (pageState == 1){
    return (
      <Second></Second>
    )
  }
  elif (pageState == 2){
    return (
      <Third></Third>
    )
  }
  else {
    return (
      <First></First>
    );
  }
}

const First = (props) => {
  const classes = useStyles();
  return (

      <Button size="lg" color="success" style={{margin:"50px"}} onClick={()=>***}>
        Move to Second page!</Button>
  )
}

const Second = (props) => {
  return (
    <Button size="lg" color="success" style={{margin:"50px"}} onClick={()=>***}>
        Move to Third page!!</Button>
  );
}
const Third = (props) => {
  return (
    <div>Third Page</div>
  );
}

Answer 1

我认为最佳做法是为每个页面指定特定的 url。所以它可以更容易管理。
以下是我的建议:

着陆页.jsx

export default function LandingPage(props) {
  return (
    <div>
        <Header></Header>    
        {props.children}
        <Footer></Footer>
      </div>
    );
  
}

首先.jsx

import {useHistory} from "react-router-dom"
const First = (props) => {
  const classes = useStyles();
  const history = useHistory(); 
  return (
      <LandingPage>
        <Button size="lg" color="success" style={{margin:"50px"}} onClick={()=>history.push("/second")}>
        Move to Second page!</Button>
     </LandingPage>
  )
}

App.js

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
import First from "./First"
import Second from "./Second"

function App() {
  return (
        <Router>
            <Switch>
              <Route path="/" component={Login} exact></Route>
              <Router path="/first" component={First}></Route>
              <Router path="/second" component={Second></Route>
            </Switch>
           </Router>
        )
}