无法在react app中的组件之间成功路由

我有一个静态反应应用程序(这意味着没有服务器端呈现)位于example.com/web-class.gr.我的问题是,当我使用侧边栏菜单时,我无法在组件之间进行路由.

例如.当我导航到example.com/web-class.gr/css-intermediate页面加载按预期.从现在开始,如果我导航到不同lessonName页面正在按预期加载.但我也有练习,当我按下菜单中的相应按钮时无法加载.要知道这是我的index.js文件:

import React from 'react';
import { Link as ReactLink } from 'react-router';
import sidebarStore from './Sidebar/SidebarStore';
import lessonValues from '../../lessonValues';
import LessonStore from '../../LessonStore';
import SidebarLink from './Sidebar/SidebarLink';


export default class Sidebar extends React.Component {
  constructor() {
    super();
    this.state = {
      SidebarIsCollapse: sidebarStore.getCurrentState()
    }
    this.NavMdPlaceholderClass = 'hidden-xs col-sm-4 col-md-3 col-lg-3';
  }

  componentWillMount() {
    sidebarStore.on('change', () => {
      this.setState({ SidebarIsCollapse: sidebarStore.getCurrentState() });
      this.ChangeSidebarState();
    });
    this.RenderMainMenu();
  }

  ChangeSidebarState() {
    const NAV_DefaultClasses = "col-sm-4 col-md-3 col-lg-3 ";
    if (this.state.SidebarIsCollapse) {
      this.NavMdPlaceholderClass = NAV_DefaultClasses + "slideInLeft";
    } else {
      this.NavMdPlaceholderClass = NAV_DefaultClasses + "slideOffLeft";
    }
  }

  RenderMainMenu() {
    this.main_menu = [];
    for (let link of lessonValues) {
      let { Id, url, isExercise, title } = link;
      this.main_menu.push();
    }
  }

  render() {
    return (
      

        
      
    );
  }
}

这是SidebarLink组件文件:

import React from 'react';
import LessonStore from '../../../LessonStore';
import { Link as ReactLink } from 'react-router';

export default class SidebarLink extends React.Component {
  SetPageTitle() {
    LessonStore.setLesson(this.props.url);
  }

  render() {
    let glyphoconType = 'glyphicon ';
    glyphoconType += this.props.isExercise ? 'glyphicon-pencil' : 'glyphicon-ok-sign';
    glyphoconType += ' nav-ico untaken-lesson';

    return (
      

         this.SetPageTitle()} >
          
            
              {this.props.title}
          
        
      
    );
  }
}

但是,如果我手动刷新页面,我可以显示练习页面.但现在我无法导航到任何其他元素.仅当我在侧边栏菜单中单击它并手动刷新页面时.

总结一下:

课程是动态加载的.我可以在他们之间导航.

我无法导航练习.只有当我单击相应的练习并点击刷新按钮时.

如果我正在观看练习(例如exercise-1),我无法导航到任何其他组件.

我使用nginx和以下是我的项目规则:

location ^~ /web-class.gr/ {
        try_files $uri $uri/ =404;
        if (!-e $request_filename){
            rewrite ^(.*)$ /web-class.gr/index.html break;
        }
    }

最后这是我的侧边栏组件:

import React from 'react';
import { Link as ReactLink } from 'react-router';
import sidebarStore from './Sidebar/SidebarStore';
import lessonValues from '../../lessonValues';
import LessonStore from '../../LessonStore';
import SidebarLink from './Sidebar/SidebarLink';

// some other helper functions here

  render() {
    return (
      

        
      
    );

有什么问题ReactLink to吗？ 在我的apache机器上一切正常.我无法弄清楚为什么我的程序会中断.

更新

我提供网站的链接,以帮助您的工作变得更容易.该网站在希腊,虽然我相信你可以理解它的结构.

web-class.gr

Github上的代码