React-router: `<Link to=...>` does't trigger navigation change

Question

I've got code similar to following:

var browserHistory = ReactRouter.browserHistory;
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Here is content:</h1>
        {this.props.children}
        <Link to="/Welcome">Welcome</Link> |
        <Link to="/Login">Login</Link>
        <a href="/">REFERENCE LINK</a>
      </div>
    );
  }
}

class Welcome extends React.Component {
  render() {
    return (
      <div>
        <h1>No hejaaaa - welcome</h1>
      </div>
    );
  }
}

class Login extends React.Component {
  render() {
    return (
      <div>
        <h1>No hejaaaa - Login</h1>
      </div>
    );
  }
}

const Routes = (
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="Welcome" component={Welcome}/>
      <Route path="Login" component={Login}/>
      <Route path="*" component={Welcome}/>
    </Route>
  </Router>
);

// init file:
var RouterContext = ReactRouter.RouterContext
var match = ReactRouter.match

match({
  routes: Routes,
  location: document.location.pathname
}, (err, redirectLocation, renderProps) => {
  ReactDOM.render(<RouterContext {...renderProps} />, document.querySelector('#app'));
});

Markup is generated correctly, but the problem is: Clicking in Links doesn't work at all. I am doing something wrong?

My libs:

• "react": "0.14.7",
• "react-dom": "0.14.7",
• "react-router": "2.0.0"

JSFIDDLE: https://jsfiddle.net/Lp3gzott/ (same code but babelified)

Answer 1

I found the solution in react-router documentation. According to Server Rendering Guide:

• In back end set:

match({ routes, location: req.url }, (err, redirectLocation, renderProps) => {
  renderToString(<RouterContext {...renderProps} />
})

Notice RouterContext instead of Router and lack of history field in match params

• In front-end:

match({ history, routes }, (error, redirectLocation, renderProps) => {
  ReactDOM.render(<Router {...renderProps} />, mountNode)
})

Notice lack of location param for match

• In routes file:

  export <Route instead of <Router

---

Error React attempted to reuse markup in a container but the checksum was invalid. is not showing up again.

Links are working like a charm!

Answer 2

match() is a Server side rendering construct, its intentional static, because on the server you only ever respond to a single route at a time. On the client you want to actually render a Router component

ReactDOM.render((
  <Router>
    { Routes }
  </Router>
), document.querySelector('#app'))

Your, markup mismatch is probably due to a different issue, and you might want to check out one of the many "universal react" starters.