帶有反應路由器的菜單組件未呈現

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;