首页 > 解决方案 > react-router:匹配和路由。在 v4 中替换 .match()

问题描述

如何在 react-router v4 中匹配和路由?

下面是我使用 react-router(v2) 和 expressJs 编写的用于服务器端渲染的代码片段。

 var routes = require('./src/routes')
 app.get('*', function(req, res) {

  ReactRouter.match({
    routes: routes,
    location: req.url
  }, function(err, redirect, props) {
    if (err) {
      res.status(500).send(err.message)
    }
    else if (redirect) {
      res.redirect(302, redirect.pathname + redirect.search)
    }
    else if (props) {
      var markup = renderToString(React.createElement(ReactRouter.RouterContext, props, null))
      res.render('index', { markup: markup })        
    }
    else {
      res.sendStatus(404)
    }
  })
})

我基本上使用 react-router.match() 功能将位置与路由匹配。我在互联网上搜索了很多,但仍然找不到 react-router v4 中 .match() 函数的替换。谁能告诉我如何将上面的代码转换为支持 react-router v4?

./src/routes.js
module.exports = <Route path="/" component={App}>
  <IndexRoute component={Top}/>
  <Route path="first" component={First}/>
  <Route path="second" component={Second}/>
  <Route path="test" component={Test}/>
  <Route path="ask" component={Ask}/>  
  </Route>

标签: javascriptreactjsreact-router-v4server-side-rendering

解决方案


推荐阅读