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

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）文件夹“ ./Components/Menu”中的Menu组件，App.js位于主Src文件夹中，BubbleSort.js位于文件夹“ ./Components/BubbleSort” < / p>

我跟随this link制作了这个小导航栏，我认为问题出在与Menu组件的使用有关，但我不知道如何解决。

Answer 1

var Particle = function(x, y) { this.x = x; this.y = y; this.xspeed = 0; this.yspeed = 0; this.xacc = 0; this.yacc = 0; this.update = function() { this.x += this.xspeed; this.y += this.yspeed; this.xspeed += this.xacc; this.yspeed += this.yacc; } } 和Route组件应这样写：-

NavLink

<Route path='/Components/BubbleSort' component={ BubbleSort } /> <Route path='/Components/InsertionSort' component={ InsertionSort } /> 组件的编写方式如下：-

NavLink

Answer 2

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