React-router Link to not working

Question

When using Link to in my component, it renders fine in the browser but when I try to click on the link it doesn't work. Nothing happens.

Can see everything fine in the inspector and the link goes to the right place but just won't work.

Any ideas what I could be doing wrong?

Code is here:

import React, { Component } from 'react';
import { Link } from 'react-router';
import classNames from 'classnames';

class myClass extends Component {

render () {
  return (
    <div className="content-about">
      <div className="posts">
        <div className="white-bg"> 
          <div className="main-content no-pad">
          <div className="company-image pt-img-8"></div>
          <div className="center">
            <Link to="/portfolio" className="more">
              <span className="larger-arrow">></span>Back
            </Link></div>
            <div className="main-content pad-50">
              <p>Some content</p>
            </div>
            </div>
        </div>
      </div>
    </div>
  );
 }
}

export default myClass;

Also my Routes are structured as follows:

 <Route name="app" path="/" component={App}>
  <Route path="home" component={HomePage} />
  <Route path="portfolio">
      <IndexRoute component={PortfolioPage}/>
      <Route path="xyz" component={XyzPage} />
  </Route>
  <Route path="about" component={AboutPage} />
  <Route path="*" component={error404}/>
 </Route>

Answer 1

Looks like you are missing the root path in each route :

<Route name="app" path="/" component={App}>
  <Route path="/home" component={HomePage} />
  <Route path="/portfolio">
    <IndexRoute component={PortfolioPage}/>
    <Route path="/xyz" component={XyzPage} />
  </Route>
  <Route path="/about" component={AboutPage} />
  <Route path="*" component={error404}/>
</Route>