Question

我是一个刚刚开始学习React的菜鸟。我在使用react router v4时遇到了问题。

我有一个主页组件，如下所示：

import React, {Component} from 'react';

class AboutPage extends Component {
    render() {
        return (
            <div>
                <h1>About</h1>
                <p>this is the about page</p>
            </div>
        );
    }
}

export default AboutPage;

这是App.js：

import React, { Component } from 'react';
import './App.css';
import {
  Link, Route, Switch,BrowserRouter
} from 'react-router-dom'
import Header from './components/common/Header';
import HomePage from './components/home/HomePage';
import AboutPage from './components/about/AboutPage';



class App extends Component {
  render() {
    const home = () =><h1> Home </h1>
    const about = () =><h1> about </h1>

    return (
      <BrowserRouter>
        <div className="container-fluid">
          <Header/>
          <Switch>
          <Route exact path="/" components={home}/>
          <Route path="/about" components={about}/>
          </Switch>
        </div>
      </BrowserRouter>

    );
  }
}



export default App;

头文件只是我想要的所有组件的导航元素。

问题是如果我点击主页或关于页面，它不会显示这些组件的内容。它只显示了nav元素和所有内容。

我使用creat-react-app构建了这个应用程序。我的代码有什么问题吗？ THX。

Answer 1

阅读文档看起来Route组件期望属性component而不是组件。我还相信您要呈现的内容是HomePage和AboutPage组件

React router v4无法在控制台中显示组件但没有错误

1 个答案: