reactjs - React-router: `` 不会触发导航更改

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 路由器”:“2.0.0”

JSFIDDLE:https://jsfiddle.net/Lp3gzott/ (相同的代码，但经过babelified)

Answer 1

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

• 在后端设置中:

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

通知 RouterContext而不是Router且缺乏history领域 match参数

• 在前端:

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.没有再出现。

链接非常有效!