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

Question

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

问题

如果我单击适当的链接（例如<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”中

我按照此链接制作了这个小导航栏，我认为问题与菜单组件的使用有关，但是我不知道如何解决。

Answer 1

Route和NavLink组件应这样编写：-

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

NavLink组件的编写方式如下：-

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

Answer 2

路由路径不应是组件文件路径。 它应该是您在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="/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;