Компонент не виден, когда я использую React Router - PullRequest
0 голосов
/ 27 февраля 2019

Я пытаюсь разработать очень простое приложение в ReactJS, используя JSX.Я установил 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'));

Меню.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>

enter image description here

1 Ответ

0 голосов
/ 27 февраля 2019
...
<Route exact path="/" Component={Welcome}></Route>
<Route path="/employees" Component={Employees}></Route>
...

Компоненты, упомянутые в теге Route, должны быть заменены на component (маленькая «c»).Упомянутый компонент подразумевается как React.Component, который мы импортируем для создания компонентов реакции, а не компонентов, переданных для тегов маршрута.

Итак,

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

Заменить на

<Route exact path="/" component={Welcome}></Route>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...