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> e.g.) 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.

try add ´<Switch></Switch>´ inside <Menu> and out of <div class="content"> — Black Hole
– Black Hole, Commented Mar 20, 2019 at 14:59
@JorgeFélixCazarez The problem here is because of improper syntax and component usage. Switch is a totally different story. :) — Ajay Gupta
– Ajay Gupta, Commented Mar 20, 2019 at 15:02
@Legeo is using different path and to in Route and NavLink components respectively. That' s why the NavLink are not working — aditya81070
– aditya81070, Commented Mar 20, 2019 at 15:04

sathish kumar · Accepted Answer · 2019-03-20 15:05:16Z

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;

thank you for your contribution. Please make sure when you answer a question, you also explain what was the problem with the OP's code. It helps to better understand the problem and the solution. Thanks! :)

aditya81070 · Accepted Answer · 2019-03-20 14:59:23Z

2

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>

answered Mar 20, 2019 at 14:59

aditya81070

7361 gold badge6 silver badges24 bronze badges

Collectives™ on Stack Overflow

Menu component with react router not rendering

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related