快速状态404与反应路由器 [英] Express status 404 with react-router

问题描述

我有一个快速服务器，它处理：1个API路由，并渲染我的初始 index.html 以包含 bundle.js 持有我的React / React-Router / Redux应用程序。

就目前来说，在我的网页上404是不可能的，因为我有一个catch： p>

  app.use（function（req，res）{
 return res.render（'index'）
 $）
  

为了 react-router 我的路线如下：

我的路线如下：

>

Express - / api / test /：x /：y

React Router - ：x / ，：x /：y

我本来想要实现的是，如果用户去过一个URL：：x /：y / z /和/ further 然后返回一个404，除非他们去过的是 / api / test /：x /：y

问题：

1. 我如何匹配路线，叮ing我的API路由，最好是以可扩展的方式返回适当的状态码？


2. 对于一些这么简单的东西，在子域中设置这个是否有很大的开销？这甚至可以缓解这个问题吗？应用程序增长时会面临问题吗？

解决方案

侧面呈现文档：
https：// github .com / reactjs / reactions-router / blob / master / docs / guides / ServerRendering.md

解决方案：

1. 提取路由以分离文件，并在快速应用程序中要求它


2. 在Express应用程序中添加一个中间件，使用 match function from react-router 。应该在负责API路线的中间人之后写下。


3. 如果没有适当的请求路由，请使用404。

所以，中间件应该类似于：

  //来自https的源代码：//github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md 
 //这是ES6，但很容易写在ES5上。 
 
 import {match，RouterContext} from'react-router'
从'./routes'导入路由
 
 var app = express（）; 
 
 // ... 
 
 app.use（（req，res，next）=> {
 match（{routes，location：req.url }，（error，redirectLocation，renderProps）=> {
 if（error）{
 res.status（500）.send（error.message）
} else if（redirectLocation）{ 
 res.redirect（302，redirectLocation.pathname + redirectLocation.search）
} else if（renderProps）{
 //您还可以检查renderProps.components或renderProps.routes 
 //您的未找到组件或路由，并发送404作为
 //以下，如果您使用全部路由
 
 //这里可以prerender组件或只是发送index.html 
 //对于预渲染，请参阅renderToString（< RouterContext {... renderProps} />）
 res.status（200）.send（... ）
} else {
 res.status（404）.send（'Not found'）
} 
}）
}）; 
  

如果任何路线发生变化，您不需要在快速应用程序上执行某些操作，因为您对前端和后端使用相同的代码。

I have an express server that handles: 1 API route and rendering my initial index.html to include bundle.js holding my React/React-Router/Redux application.

As it stands, it is impossible to 404 on my web page as I have a catch all:

app.use(function (req, res) {
  return res.render('index')
})

In order for react-router's NoMatch to work I need to send a 404 code.

My routes are as follows:

Express — /api/test/:x/:y

React Router — :x/, :x/:y

What I am essentially trying to achieve is, if the user ever goes to a URL of: :x/:y/z/and/further then return a 404, unless what they've gone to is /api/test/:x/:y

Questions:

1. How can I match routes, excluding my API routes, preferably in a scalable way, returning appropriate status codes?
2. For something so simple, is there significant overhead in setting this up on a subdomain? Would that even alleviate the issue? Would I face issues when the app grows?

解决方案

Take a look at react-router server side rendering docs: https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md

Solution:

1. Extract routes to separate files and require it in express app
2. Add a middleware in express app that check url in express using match function from react-router. It should be written after middlewares that responsible for API routes.
3. In case there is no appropriate routes for request url, response with 404.

So, middleware should be similar to this:

// origin code from https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md
// this is ES6, but easily can be written on a ES5.

import { match, RouterContext } from 'react-router'
import routes from './routes' 

var app = express();

// ...

app.use((req, res, next) => {
  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    if (error) {
      res.status(500).send(error.message)
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
    } else if (renderProps) {
         // You can also check renderProps.components or renderProps.routes for
        // your "not found" component or route respectively, and send a 404 as
        // below, if you're using a catch-all route.

        // Here you can prerender component or just send index.html 
        // For prependering see "renderToString(<RouterContext {...renderProps} />)"
        res.status(200).send(...)
    } else {
      res.status(404).send('Not found')
    }
  })
});

If any routes change, you don't need to do something on express app, because you're using same code for frontend and backend.

这篇关于快速状态404与反应路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！