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

标记生成正确，但问题是：点击链接根本不起作用。我做错了什么？

我的库：

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

JSFIDDLE：https://jsfiddle.net/Lp3gzott/（相同的代码，但 babelified）

Answer 1

match() 是一个服务器端渲染结构，它是有意静态的，因为在服务器上你一次只能响应一个路由。在客户端你想实际渲染一个 Router 组件

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

您的标记不匹配可能是由于其他问题造成的，您可能想查看众多 "universal react" 初学者之一。

Answer 2

我在 react-router 文档中找到了解决方案。根据 Server Rendering Guide:

在后端集合中：

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

注意 RouterContext 而不是 Router 并且 match 参数中缺少 history 字段

在前端：

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

注意 match

缺少 location 参数

在路由文件中：

导出 <Route 而不是 <Router

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

链接非常有效！

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

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

reactjs

react-router