Cannot successfully route between components in a reaction application

Question

I have a static response application (this means that there is no server-side rendering) located under example.com/web-class.gr . My problem is that I cannot route between components when I use the sidebar menu.

For instance. When I go to example.com/web-class.gr/css-intermediate , the page loads as expected. Now, if I go to another lessonName , the page will load as expected. But I also have exercises that I can’t load when I click on the corresponding button in my menu. To get an idea, this is my index.js file:

 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(<SidebarLink key={Id} url={url} isExercise={isExercise} title={title}/>); } } render() { return ( <div class={this.NavMdPlaceholderClass} id="nav-md-placeholder"> <nav id="sidebar"> <ul id="main-menu"> <li class="ripple-btn"> <ReactLink to="/" onClick={this.SetLessonDetails.bind(this)}> <span class="item-align-fix"> <i class="glyphicon glyphicon-home" style={{'marginRight': '10px'}}></i> <strong> <span>AΡΧΙΚΗ</span> </strong> </span> </ReactLink> </li> {this.main_menu} </ul> </nav> </div> ); } } 

here is the SidebarLink component file:

 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 ( <li class="ripple-btn"> <ReactLink to={this.props.url} onClick={() => this.SetPageTitle()} > <span class="item-align-fix"> <i class={glyphoconType}></i> <span>{this.props.title}</span> </span> </ReactLink> </li> ); } } 

But if I refresh the page manually, I can open the exercise page. But now I can’t move on to any other element. Only if I clicked it in the sidebar menu and reloaded the page manually.

Summarizing:

• Lessons are loaded dynamically. I can move between them.
• I can’t move on to the exercises. Only if I click on the appropriate exercise and click the refresh button.
• If I am viewing an exercise (e.g. exercise-1 ), I cannot move on to another component.

I use nginx , and below is my rule for the project:

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

And finally, here is my sidebar component:

 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 ( <div class={this.NavMdPlaceholderClass} id="nav-md-placeholder"> <nav id="sidebar"> <ul id="main-menu"> <li class="ripple-btn"> <ReactLink to="/web-class.gr/" onClick={this.SetLessonDetails.bind(this)}> <span class="item-align-fix"> <i class="glyphicon glyphicon-home" style={{'marginRight': '10px'}}></i> <strong> <span>AΡΧΙΚΗ</span> </strong> </span> </ReactLink> </li> {this.main_menu} </ul> </nav> </div> ); 

Is there a problem with ReactLink to ? On my apache machine, everything works as expected. I can’t understand why my program crashes.

Update

I provide a link to the site to facilitate your work. The site is in Greek, although I believe that you can understand its structure.

web-class.gr

Github Code

Answer 1

Second update:

Change the rendering code in react/index.js to

 ReactDom.render( <Router history={browserHistory} > <Route path="/" component={Layout} > <IndexRoute component={Index} ></IndexRoute> <Route path="/exercise-1" name="exercise-1" component={Exercise1} ></Route> <Route path="/exercise-2" name="exercise-2" component={Exercise2} ></Route> <Route path="/exercise-3" name="exercise-3" component={Exercise3} ></Route> <Route path="/exercise-4" name="exercise-4" component={Exercise4} ></Route> <Route path="/exercise-5" name="exercise-5" component={Exercise5} ></Route> <Route path="/exercise-6" name="exercise-6" component={Exercise6} ></Route> <Route path="/:lessonName" name="lesson" component={Lesson} ></Route> <Route path=":lessonName" name="lesson" component={Lesson} ></Route> </Route> </Router> ,app); 

i..e the path starts with /