Question

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

App.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;

Index.js

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

Menu.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>

How to generate UUID in angular 6

Answer 1

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

需要将Route标记中提到的组件更改为组件（小“ c”）。提到的组件是React.Component，我们将其导入以创建React组件，而不是传递给Route标签的组件。

所以

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

替换为

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

使用React Router时组件不可见

1 个答案: