Reactjs 通过服务器响应路由器重定向_Reactjs_React Router_React Dom Server

Reactjs 通过服务器响应路由器重定向

reactjs

Reactjs 通过服务器响应路由器重定向,reactjs,react-router,react-dom-server,Reactjs,React Router,React Dom Server,因此，我正在一个网站上工作，该网站需要以下路径的链接： localhost:3000/visit/:name 重定向到外部url，例如google.com？affiliateID=2。重定向需要不遵循状态代码307 该应用程序是通用的；使用express和客户端react进行服务器端渲染，两者都通过react路由器使用共享路由 routes.js <Route status={307} path="visit/:slug" /> server.js app.use((req,

因此，我正在一个网站上工作，该网站需要以下路径的链接：

localhost:3000/visit/:name

重定向到外部url，例如google.com？affiliateID=2。重定向需要不遵循状态代码307

该应用程序是通用的；使用express和客户端react进行服务器端渲染，两者都通过react路由器使用共享路由

routes.js

<Route status={307} path="visit/:slug" />

server.js

app.use((req, res) => {
  match({routes, location: req.originalUrl}, (err, redirectLocation, renderProps) => {
   if (err) {
    res.status(500).send(err.message)
   } else if (redirectLocation) {
    res.redirect(302, redirectLocation.pathname + redirectLocation.search)
   } else if (renderProps) {
    const html = renderToString(<RouterContext {...renderProps} />)

    const isAffiliateLink = renderProps.routes.filter((route) => {
     return route.status === 307
    }).length > 0

   if (isAffiliateLink) {
    return res.redirect(307, "http://google.com")
   }

   const markup = renderToStaticMarkup(<Document html={html} />)

   res.status(200).send("<!DOCTYPE html>" + markup)
  } else {
    res.status(404).send("Not Found")
  }
 })
})

app.use（（请求、回复）=>{
匹配（{routes，location:req.originalUrl}，（err，redirectLocation，renderOps）=>{
如果（错误）{
资源状态（500）.发送（错误消息）
}else if（重定向位置）{
res.redirect（302，redirectLocation.pathname+redirectLocation.search）
}else if（渲染器操作）{
常量html=renderToString（）
常量isAffiliateLink=renderOps.routes.filter（（路由）=>{
返回路线。状态===307
}).长度>0
如果（isAffiliateLink）{
返回res.redirect（307，“http://google.com")
}
常量标记=renderToStaticMarkup（）
res.status（200）.send（“+”标记）
}否则{
资源状态（404）.发送（“未找到”）
}
})
})

在这里，我通过检查状态307来检查请求的路由是否为/visit/slug。如果是这种情况，它将重定向到目标。这很有效

然而，我现在所面临的困难是，我有数百个附属链接，有不同的URL，每个链接都有一个对应的slug

以编程方式为正确的slug输入正确url的最佳方法是什么？在路线上我可以给一个道具

<Route path="/visit/:slug" url="url.com" />

我可以从server.js访问它，但我不确定如何根据slug使其动态

或者我应该对server.js上包含所有slug及其对应URL的数据库执行API调用吗

或者，是否有一种方法可以将道具从用于单击链接的组件传递到路线？即

<AffiliateLink slug={slug} url={url} />

非常感谢您的帮助

我们有任何解决方案。甚至我在当前的项目中也遇到了这种问题。如果是，请在此处张贴您的答案，以帮助我们更好地了解您的答案