router: `<Link to=...>` does't trigger navigation change
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:
JSFIDDLE: https://jsfiddle.net/Lp3gzott/ (same code but babelified)
I found the solution in react-router documentation. According to Server Rendering Guide:
match({ routes, location: req.url }, (err, redirectLocation, renderProps) => {
renderToString(<RouterContext {...renderProps} />
})
Notice RouterContext instead of Router and lack of history field in match params
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!
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.
链接地址: http://www.djcxy.com/p/90266.html