Javascript 按反应和材料用户界面的页面移动

我的想法是，

具有

，用户单击进度可以更改它

具有

页面状态

，然后通过在

第一个

和

第二个

页面中单击按钮来更改该状态

这是正确的做法吗？如何通过单击

First

和

Second

页面中的按钮来更改

Top

的

pageState

这些是我到目前为止做的

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>
  );
}

导出默认功能登录页（道具）{
返回(
);
}
const Top=（道具）=>{
const[pageState，setPageState]=useState（[]）；
如果（pageState==1）{
返回(
)
}
elif（页面状态==2）{
返回(
)
}
否则{
返回(
);
}
}
常量优先=（道具）=>{
const classes=useStyles（）；
返回(
***}>
移到第二页！
)
}
常数秒=（道具）=>{
返回(
***}>
移到第三页！！
);
}
const Third=（道具）=>{
返回(
第三页
);
}

我认为最好的做法是为每个页面指定特定的url。这样就更容易管理。
以下是我的建议：

LandingPage.jsx

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

导出默认功能登录页（道具）{
返回(
{props.children}
);
}

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>
  )
}

从“react router dom”导入{useHistory}
常量优先=（道具）=>{
const classes=useStyles（）；
const history=useHistory（）；
返回(
history.push（“/秒”）}>
移到第二页！
)
}

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>
        )
}

导入{
BrowserRouter作为路由器，
转换
路线,，
重新使用
}从“反应路由器dom”；
首先从“/First”导入
从“/Second”导入秒
函数App（）{
返回(
)
}

为什么不使用react路由器在页面之间导航？我已经回答了一个类似的问题。这是一个react-native问题，但该方法也可能对这个问题有用。其思想是将键和组件（页面）关联起来，并根据状态中的当前键值有条件地呈现组件。如果要更改子组件中父组件的状态，可以通过道具将状态更新功能（

setPageState

）传递给子组件，并从子组件调用它。@Florin我不想允许用户直接访问

Second

或

Third

页面。我的站点就像问卷站点，每个页面都有问题1、问题2或问题3，我想让用户按照顺序移动。@Bas van der Linden感谢您的评论

如果要更改子组件中父组件的状态，可以通过props将状态更新函数（setPageState）传递给子组件，并从子组件调用它这可能对may案例有帮助。我会试试的。非常感谢，使用特定的url和很好的建议对我来说是个好主意。但是，我不希望用户目录处于第二个
状态。我的网站就像问卷调查网站，每页都有问题1、问题2或问题3。