SO 问题与 react-router-dom: "Check the render method of `Header`"

Question

我在使用 react-router-dom 时遇到错误“/home”路由失败并出现以下错误：

路线/家：

路由“/about”工作正常：

有谁知道如何解决这个问题？这是我的 "index.js" 文件的样子：

import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import registerServiceWorker from './registerServiceWorker';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/font-awesome/css/font-awesome.min.css';

import App from './components/App';

const history = createBrowserHistory();

ReactDOM.render(
  <Router history={ history }>
    <App />
  </Router>
, document.getElementById('root'));

registerServiceWorker();

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这就是我的 "App.jsx" 组件文件的样子：

import React, { Component } from "react";
import { Switch, Route, Redirect } from 'react-router-dom';

import MainNav from './MainNav/MainNav';
import Logo from './Logo/Logo';
import Footer from './Footer/Footer';
import Copyright from './Copyright/Copyright';
import HomePage from './HomePage/HomePage';
import AboutPage from './AboutPage/AboutPage';
import Error404 from './Error404/Error404';

import './App.css';

class App extends Component {
  render() {
    return (
      <div className="app">
        <MainNav />
        <Logo />
        <Switch>
        <Route path="/home" component={ HomePage } />
          <Route exact path="/about" component={ AboutPage } />
          <Route exact path="/404" component={ Error404 } />
          <Redirect from="/" to="/home" />
        </Switch>
        <Footer />
        <Copyright />
      </div>
    );
  }
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这是我的 "HomePage.jsx":

import React, { Component } from 'react';

import Header from './Header/Header';
import Stores from './Stores/Stores';
import Services from './Services/Services';
import Reviews from './Reviews/Reviews';
import Contact from './Contact/Contact';

import './HomePage.css';

export default class HomePage extends Component {
  render() {
    return (
      <div className="homepage">
        <Header />
        <Stores />
        <Services />
        <Reviews />
        <Contact />
      </div>
    )
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

已经解决。谢谢！

Answer 1

如错误所述 - 您可能忘记导出 Header 组件，或者将默认导出与命名导出和 vice-versa 混合 - 或者渲染方法 returns 未定义。

SO 问题与 react-router-dom: "Check the render method of `Header`"

SO Issue with react-router-dom: "Check the render method of `Header`"

reactjs

react-router

react-router-dom