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

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

React 和 Material UI 的页面移动

1 个答案: