Я пытаюсь разработать очень простое приложение в 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](https://i.stack.imgur.com/bBVzG.png)