路由器：`<链接到= ...>`不会触发导航改变

我有类似于以下的代码：

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）

---

我在反应路由器文档中找到了解决方案。 根据服务器渲染指南：

在后端设置：

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. 不再显示出来。

链接工作就像一个魅力！

---

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

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

您的标记不匹配可能是由于不同的问题，您可能想要查看许多“普遍反应”入门者之一。

链接地址: http://www.djcxy.com/p/90265.html

上一篇: router: `<Link to=...>` does't trigger navigation change

下一篇: Bootstrapping Hybrid Angular 1+2 Application