Question

所以我已经按照以下方式设置了React-Router：

// App.js
render(){
    console.log(this.props)
    return (
      <div>
        <Header />
        {this.props.children}
        <Footer />
      </div>
      )
  }

// routes.js
export default (
    <Router>
      <Route path="/" component={App} >
        <IndexRoute component={HomePage} />
        <Route path="/destination" component={DestinationIndexHandler} />
        <Route path="/destination/:slug" component={DestinationHandler} />
        <Route path="/destination/:slug/:article" component={ArticleHandler} />
        <Route path="/article" component={ArticleIndexHandler} />
        <Route path="/article/:slug" component={ArticleHandler} />
        <Route name='contact' path="/contact" component={ContactHandler} />
        <Route path="*" component={NotFoundHandler}/>
      </Route>
    </Router>
);

最后：

// server.js
app.get(/^(?!.*(api|.js|.css)).*$/, function (req, res) {
  let location = createLocation(req.url);
  console.log("LOCAL")
  match({ routes, location }, (error, redirectLocation, renderProps) => {
    console.log(location);
      if (error) {
        res.status(500).send(error.message)
      } else if (redirectLocation) {
        res.redirect(302, redirectLocation.pathname + redirectLocation.search)
      } else if (renderProps) {
        let content = ReactDOMServer.renderToString(<RoutingContext {...renderProps} />);
        console.log(content);
        res.status(200).render('index', {
          content: content,
          staticPort: DEV_PORT
        });
      } else {
        res.status(404).send('Not found')
      }
    })
});

出于某种原因，当我刷新页面时，服务器端成功呈现视图，但浏览器呈现主视图（IndexRoute）。如果删除IndexRoute，它只会呈现页眉和页脚。

如果我登录终端，我会获得3次返回，第一次和第二次返回：

CHILDREN { '$$typeof': Symbol(react.element), type: [Function: ContactHandler],

最后调用NotFoundHandler，即使路线在那里。有什么想法吗？

刷新页面时，React Router，this.props.children == null

0 个答案: