React-router: `<<Link to = ...>` does not trigger a navigation change

Question

I have code similar to the 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')); }); 

The markup is generated correctly, but the problem is that clicking in the links does not work at all. Am I doing something wrong?

My libraries:

• "react": "0.14.7",
• "reaction": "0.14.7",
• reaction router: 2.0.0

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

Answer 1

I found the solution in the documentation for the reactor router. According to the Server Rendering Guide :

• At the end of the set:

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

Pay attention to the RouterContext instead of the Router and the absence of the history field in the match parameters

• In the interface:

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

Note the lack of a location parameter for match

• In the routes file:

  export <Route instead of <Router

---

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

Links work like a charm!

Answer 2

match() is a server-side rendering construct, its deliberate staticness, since on a server you always react only to one route at a time. On the client, you want to actually display the Router component

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

Your markup mismatch is probably related to another problem, and you might want to check out one of the many “universal reactive” starters.