Question

我正在使用React开始一个新项目，在我的index.js我正在构建一些路由，然后启动应用程序。我遇到了一个问题，如果我在<Header />组件之外添加<Switch>之类的组件，浏览器崩溃，我无法调试，因为一切都挂了。这可能是我缺少的一个基本问题，但我感觉很难过，因为我已经完成了与此类似的其他项目。

这是我的index.js

const siteURL = 'https://factor-1-studios.local';

const getPages = () => {
  return new Promise((resolve, reject) => {
    const endpoint = `${siteURL}/wp-json/better-rest-endpoints/v1/pages?content=false&acf=false&media=false&per_page=99`

    fetch(endpoint)
    .then(checkStatus)
    .then(response => response.json())
    .then(pages => {
      resolve(pages);
    })
    .catch(error => console.error(error))
  })
}

// check what component to render
const identifyComponent = (page) => {
  // Map WordPress template names to Components
  const components = {
    'page': Page,
    'adland-10steps': Page,
    'adland-nonprofit': Page,
    'quote': Page,
    'contact': Page,
    'about-us': Page,
    'about-standards': Page,
    'open-source': Page,
    'home': Home
  }

  if( page.template !== 'default' && page.template ) {
    return components[page.template];
  } else {
    return Page;
  }
}

class AppInit {

  // build the app and routes with page response
  buildApp() {

    async function buildRoutes (){
      let pageList = await getPages();

     render(
        <div>
          <Router>
            <ScrollToTop>
              <div>
                <Header />
                <Switch>
                  <Route path="/" render={(props) => <Home siteURL={siteURL} {...props} />} exact />
                  {pageList.map( (page) => {
                    let Template = identifyComponent(page)
                    let pageID = page.id;
                    let parent = page.parent;

                    return(
                      <Route
                        key={pageID}
                        path={`${parent ? '/'+parent : ''}/${page.slug}`}
                        render={(props) => <Template pageID={pageID} siteURL={siteURL} {...props} />}
                        exact
                      />
                    )
                  })}
                  <Route component={NotFound} />
                </Switch>

              </div>
            </ScrollToTop>
          </Router>
        </div>
        , document.getElementById('root')
      )
    }

    buildRoutes();
  }

  /*
   * Run the App
   */
  run() {
    this.buildApp();
  }

}

new AppInit().run();

而且<Header />只是为了安全，尽管这里还没有太多进展：

class Header extends Component {
  render(){

    // Header Styles
    const SiteHeader = styled.header`
      .container {
        padding: 30px 0;
      }

      .logo {
        font: 900 50px 'Helvetica';
        letter-spacing: -2px;
        color: #fff;
        text-decoration: none;
      }

      .button {
        margin-right: 80px;
        text-transform: uppercase;
      }
    `;

    return(
      <Header className="pattern">
        <div className="container gradient">
          <div className="row row--align-items-center">
            <div className="col-6">
              <a href="#" className="logo">factor1</a>
            </div>

            <div className="col-6 text-right">
              <a href="#" className="button button--secondary">Get a Quote</a>

              <div className="menu-icon">
                <a id="nifty-nav-toggle" href="#" className="nifty-hamburger"><span></span></a>
              </div>
            </div>
          </div>
        </div>
      </Header>
    )
  }
}

export default Header;

有关可能导致浏览器挂起的问题的任何想法？

更新这只是Header组件中的一个愚蠢的错误。它应该呈现SiteHeader而不是Header

在Switch外部添加组件时浏览器崩溃

0 个答案: