React-router:`<Link to = ...>`不会触发导航更改

Question

我有类似以下的代码:

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'));
});

标记生成正确,但问题是:单击链接根本不起作用.我做错了什么？

我的文章:

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

JSFIDDLE:https://jsfiddle.net/Lp3gzott/ (相同的代码,但是babelified)

Answer 1

我在react-router文档中找到了解决方案。根据服务器渲染指南：

• 在后端设置中：

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

注意params中的RouterContext代替Router和缺少字段historymatch

• 在前端：

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

注意缺少location参数match

• 在路线文件中：

  导出<Route而不是<Router

错误React attempted to reuse markup in a container but the checksum was invalid.不再出现。

链接就像一个魅力！