CODEWITHSUNDEEP
reactjsreact-router-dom
Hardik Gondalia
Hardik Gondalia

Reputation: 3717

Component is not visible when I use React Router

I've trying to develop very simple application in ReactJS using JSX. I've install react-router-dom and implemented following code:

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>
        )
    }
}

Issue is, when I click on links, url are getting change, but I can't see component on a page. Welcome component has <h1> tag like following which is not visible

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

enter image description here

Upvotes: 0

Views: 53

Answers (1)

shivangi rajde
shivangi rajde

Reputation: 1

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

The components mentioned in the Route tag need to be changed to component (small "c"). Component mentioned is meant as the React.Component which we import for creating react components rather than component passed for Route tags.

So, 

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

Replace to

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

Upvotes: 1

Related Questions