Page movement by React and Material UI

user_1942868 0
Viewed 177

My idea is that <LandingPage> has <Top> and it is altered by user clicking progress.

<Top> has pageState, then it is changed by button clicking in First and Second page

Is it correct practice? and How can I change the pageState of Top by clicking the button in First and Second page ??

These are what I made so far

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>
  );
}
material-ui reactjs javascript
1 Answers

I think the best practice is to dedicate specific url to each page. So it can be easier to manage.
Below is my suggestion:

LandingPage.jsx

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

First.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>
        )
}
user_144800380
Related