Menu component with react router not rendering

Question

i'm just new to react router, this is my first try :)

Problem

If i click on the proper link ( <NavLink to='/BubbleSort'>Bubble sort</NavLink> eg) the i don't get the content, the page still continue to be without content.

Code

import React, { Component } from 'react';
import './App.css';
import {
  Route,
  HashRouter
} from 'react-router-dom';
import BubbleSort from './Components/BubbleSort';
import InsertionSort from './Components/InsertionSort';
import Menu from './Components/Menu';


class App extends Component {

  render() {
    return (
    <HashRouter>
      <div className="App">
        <Menu/>
        <div className="content">
          <Route path="./Components/BubbleSort" component = { BubbleSort }/>
          <Route path="./Components/InsertionSort" component = { InsertionSort }/>
        </div>
      </div>
    </HashRouter>
    );
  }
}

export default App;

Down below we have the Menu component

import React, {Component} from 'react';
import './Menu.css';
import {
    NavLink,
  } from 'react-router-dom';



class Menu extends Component {

    render() {
        return(
                <nav className="navbar">
                    <div 
                        className="nav-button" >
                        <NavLink to='/BubbleSort'>Bubble sort</NavLink>
                    </div>
                    <div 
                        className="nav-button">
                        <NavLink to="./InserionSort">Insertion sort</NavLink>
                    </div>
                    <div 
                        className="nav-button" >
                        <NavLink>Selection sort</NavLink>
                    </div>
                    <div 
                        className="nav-button" 
                        a href="/mergeSort">
                        Merge sort
                    </div>
                    <div 
                        className="nav-button" 
                        a href="/quickSort">
                        Quick sort
                    </div>
                    <div 
                        className="nav-button" 
                        a href="/radixSort">
                        Radix sort
                    </div>
                </nav>
        )
    }
}

export default Menu;

Expected Behaviour

if I click on <NavLink to='/BubbleSort'>Bubble sort</NavLink> the page has to shows the actual content of the BubbleSort component.

Consideration

1) The Menu component in the folder "./Components/Menu", the App.js is in the main Src folder, the BubbleSort.js is in the folder "./Components/BubbleSort"

i followed this link to made this little navbar, i think that the problem is something related to the use of the Menu component, but i don't know how to fix it.

Answer 1

Route and NavLink Component should be written like this:-

<Route path='/Components/BubbleSort' component={ BubbleSort } />
<Route path='/Components/InsertionSort' component={ InsertionSort } />

NavLink component will be written like the following:-

<NavLink to='/Components/InsertionSort'>Insertion Sort</NavLink>

Answer 2

Route path should not be the component file path. it should be what you put inside (to) props inside NavLink. Demo Reference code pen

import React, { Component } from 'react';
import './App.css';
import {
  Route,
  HashRouter
} from 'react-router-dom';
import BubbleSort from './Components/BubbleSort';
import InsertionSort from './Components/InsertionSort';
import Menu from './Components/Menu';


class App extends Component {

  render() {
    return (
    <HashRouter>
      <div className="App">
        <Menu/>
        <div className="content">
          <Route path="/BubbleSort" component = { BubbleSort }/>
          <Route path="/InsertionSort" component = { InsertionSort }/>
        </div>
      </div>
    </HashRouter>
    );
  }
}

export default App;

import React, {Component} from 'react';
import './Menu.css';
import {
    NavLink,
  } from 'react-router-dom';



class Menu extends Component {

    render() {
        return(
                <nav className="navbar">
                    <div 
                        className="nav-button" >
                        <NavLink to='/BubbleSort'>Bubble sort</NavLink>
                    </div>
                    <div 
                        className="nav-button">
                        <NavLink to="/InserionSort">Insertion sort</NavLink>
                    </div>
                    <div 
                        className="nav-button" >
                        <NavLink>Selection sort</NavLink>
                    </div>
                    <div 
                        className="nav-button" 
                        a href="/mergeSort">
                        Merge sort
                    </div>
                    <div 
                        className="nav-button" 
                        a href="/quickSort">
                        Quick sort
                    </div>
                    <div 
                        className="nav-button" 
                        a href="/radixSort">
                        Radix sort
                    </div>
                </nav>
        )
    }
}

export default Menu;