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

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

我的文章：

＆＃34;反应＆＃34;：＆＃34; 0.14.7＆＃34;，
＆＃34; react-dom＆＃34;：＆＃34; 0.14.7＆＃34;，
＆＃34; react-router＆＃34;：＆＃34; 2.0.0＆＃34;

JSFIDDLE：https://jsfiddle.net/Lp3gzott/（相同的代码，但是被诽谤）

Answer 1

我在react-router文档中找到了解决方案。根据{{3}}：

在后端设置：

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.未再次显示。

链接就像魅力一样！

Answer 2

match()是服务器端呈现构造，它是故意静态的，因为在服务器上，您一次只响应一条路由。在客户端上，您希望实际呈现路由器组件

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

你的，标记不匹配可能是由于一个不同的问题，你可能想要查看众多＆＃34;通用反应中的一个＆＃34;起动器。

React-router：`<link to =“...”/>`不会触发导航更改

2 个答案: