带有反应路由器的菜单组件未呈现

【问题标题】：Menu component with react router not rendering带有反应路由器的菜单组件未呈现
【发布时间】：2019-03-20 14:52:42
【问题描述】：

我只是反应路由器的新手，这是我的第一次尝试:)

问题

如果我点击正确的链接（例如<NavLink to='/BubbleSort'>Bubble sort</NavLink>），我没有得到内容，页面仍然没有内容。

代码

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;

下面我们有Menu 组件

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;

预期行为

如果我点击<NavLink to='/BubbleSort'>Bubble sort</NavLink>，页面必须显示BubbleSort 组件的实际内容。

考虑

1）Menu组件在文件夹“./Components/Menu”中，App.js在主Src文件夹中，BubbleSort.js在文件夹“./Components/BubbleSort”中

我跟着this link 做了这个小导航栏，我认为问题与菜单组件的使用有关，但我不知道如何解决它。

【问题讨论】：

• 尝试在 和

  内添加“”
• Route 和 NavLink 应该有 relative path
• @JorgeFélixCazarez 这里的问题是由于不正确的语法和组件使用。 Switch 是一个完全不同的故事。 :)
• @Legeo 在Route 和NavLink 组件中分别使用了不同的path 和to。这就是NavLink 不起作用的原因
• 我没有看到 ，它是真的@AjayGupta