reactjs - 使用 React Router 时组件不可见

Question

我正在尝试使用 JSX 在 ReactJS 中开发非常简单的应用程序。我已经安装react-router-dom并实现了以下代码：

应用程序.Js

import React, { Component } from 'react';
import './App.css';
import { Header } from './app/header';
import { Footer } from './app/footer';
import { Menu } from './app/menu';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Welcome } from './app/welcome';
import { Employees } from './app/employees';

class App extends Component {
  render() {
    return (
      <div>
        <Header></Header>
        <Router>
          <div>
            <Menu></Menu>
            <>
              <Route exact path="/" Component={Welcome}></Route>
              <Route path="/employees" Component={Employees}></Route>
            </>
          </div>
        </Router>
        <Footer name="Hardik Gondalia"></Footer>
      </div>
    )
  }
}

export default App;

索引.js

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

菜单.jsx

import React, { Component } from 'react'
import { Link, BrowserRouter as Router } from 'react-router-dom';

export class Menu extends Component {
    render() {
        return (
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/employees">Employees</Link></li>
                <li><Link to="/add">Add Employee</Link></li>
            </ul>
        )
    }
}

问题是，当我点击链接时，url 正在发生变化，但我在页面上看不到组件。欢迎组件具有<h1>如下标签，不可见

<div><h3>Welcome to React Application</h3></div>

标签： reactjsreact-router-dom

Answer 1

...
<Route exact path="/" Component={Welcome}></Route>
<Route path="/employees" Component={Employees}></Route>
...

Route标签中提到的组件需要改成component（小“c”）。提到的组件是指我们为创建反应组件而导入的 React.Component，而不是为 Route 标签传递的组件。

所以，

<Route exact path="/" Component={Welcome}></Route>

替换为

<Route exact path="/" component={Welcome}></Route>