使用Create-React-App：切换通过道具的多个页面

Question

我目前正在开展一个学校项目，我打算主要使用HTML / CSS和一些javascript。但是，我们的顾问告诉我们要部分实施反应，所以我处于这样一个状态，我不知道自己在做什么，截止日期即将到来。

以下就是我现在所拥有的。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Page from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<Page />, document.getElementById('root'));
serviceWorker.unregister();

App.js

class Page extends Component{
    constructor(props){
        super(props);
        this.state={
                page:"categories",
                loc: "Some Location",
                category: "Resources", //This is filled by user choice
                scenario: "Emergency" //This is filled by user choice
        };
        this.shiftPage = this.shiftPage.bind(this)
    }

    shiftPage(newPage) {
        this.setState({page: newPage}); 

    }

    render(){
        if (this.state.page === "scenario"){
            return(
                <Scenario page ={this.state.page} loc={this.state.loc} category={this.state.category} scenario={this.state.scenario} shiftPage={this.shiftPage}></Scenario> 
            );
        }
        else if(this.state.page === "categories"){
            return(
                <Categories page ={this.state.page} loc={this.state.loc} category={this.state.category} scenario={this.state.scenario} shiftPage={this.shiftPage}></Categories> 
            );
        }
        else if(this.state.page === "tips"){
            return(
                <Tips page ={this.state.page} loc={this.state.loc} category={this.state.category} scenario={this.state.scenario}></Tips>
            );
        }
        else if(this.state.page === "rights"){
            return(
                <Rights page ={this.state.page} loc={this.state.loc} category={this.state.category} scenario={this.state.scenario}></Rights>
            );
        }
        else{
            alert("Page Not Found.")
            return(
                <div>
                    <h1>Page Not Found</h1>
                        <p>The requested page does not exist. Please redirect to the <a href="../../welcome.html">Welcome</a> Page</p>
                </div>
            );
        }
    }
}
class Categories extends Component {
  render() {
    return ( //some html code...
        <button onClick={this.props.shiftPage("rights")}>
                    <div className = "category-box" id= "category-rights" >
                            <div className = "category-icon-container" id = "rights-container">
                                <img id = "rights-icon" src={require("./img/Laws.svg")} alt="Law Icon" height="37px" width="37px"></img>
                            </div>
                            <p>Rights</p>
                    </div>
        </button>
//Some HTML code...

基本上我要做的是让父类Page根据前一页中的用户选择呈现不同的页面。截至目前我只更新了this.page.state，但我打算更新其他州。

我现在的代码的主要问题是，当我加载第一页时，我希望它加载页面categories，因为它最初是在Page类中设置的。但是，它会加载rights页面，但尚未单击该按钮。是否有可能实现它的实现

1. 基于this.state.page的页面渲染
2. 用户做出选择
3. 从基于this.state.page的Child类更新onClick上的Page State
4. 页面类重新呈现到新页面

我对任何和所有修改持开放态度，包括重构我的整个代码库。此外，如果反应实施不是此类任务的可行选项，如果您可以重定向到另一个框架来执行此操作，那将是惊人的！

任何和所有的帮助将不胜感激！非常感谢你提前。

Answer 1

发生这种情况是因为使用了

<button onClick={this.props.shiftPage("rights")}>

这是一个函数调用，意味着函数将在render上调用。

要纠正此问题并仅在单击时调用该函数，您可能需要折射到：

<button onClick={()=>this.props.shiftPage("rights")}>

Answer 2

您要实现的功能称为路由。要解决此问题，您可以使用react-router库。 https://reacttraining.com/react-router/web/guides/quick-start

Answer 3

app.js

import React from 'react';
import { Helmet } from 'react-helmet';
import styled from 'styled-components';
import { Switch, Route, } from 'react-router-dom';

import Scenario from '../Scenario'
import Categories from '../Categories'
import Tips from '../Tips'
import Rights from '../Rights'

const AppWrapper = styled.div`
  min-height: 100%;
`;

export default function App() {
  return (
    <AppWrapper>
       <Helmet titleTemplate="Admin" defaultTitle="Apex Sales 
        Portal">
         <meta name="description" content="Apex Sales Portal" />
       </Helmet>
       <Switch>
         <Route path="/scenario" component={Scenario} exact />
         <Route path="/categories" component={Categories} exact />
         <Route path="/tips" component={Tips} exact />
         <Route path="/rights" component={Rights} exact />
       </Switch>   
    </AppWrapper>
  );
}

index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom'
import App from "../src/containers/App";
import registerServiceWorker from "./registerServiceWorker";

ReactDOM.render(
    <BrowserRouter>
      <App/>
    </BrowserRouter>,
   document.getElementById("root")
);

registerServiceWorker();