防止 React Router 路由服务器 API 路径答案

【问题标题】：Prevent React Router from routing a server API path防止 React Router 路由服务器 API 路径
【发布时间】：2016-06-27 20:00:19
【问题描述】：

在服务器上，/api 下设置了仅 API 路径。

在客户端调用此路径时，react-router 接管并响应：

browser.js:49 Warning: [react-router] Location "/api/my_request" did not match any routes

我们如何让 react-router 绕过这一点，将请求发送到服务器？

更新：

这是发送请求的方式：

const sock = new SockJS('http://localhost:3030/api')

sock.onopen = () => {
  console.log('open')
}
sock.onmessage = (e) => {
  console.log('message', e.data)
}
sock.onclose = () => {
  console.log('close')
}

sock.send('test')

【问题讨论】：

那是你在服务器上做的事情。如果/api 在向您发送数据的服务器上匹配，那么它将不会为您的具有您的 React 应用程序的 html 页面提供服务
@azium 问题是请求永远无法在服务器上匹配，因为 react-router 在客户端上是第一个匹配的。
我不是很关注你，你想提出什么样的要求？您是要加载另一个 html 页面还是什么？ React 路由器只会尝试通过 history.push 更改 url，因此常规链接或 ajax 请求不会触发 react-router
@azium 响应将是我的情况下的 JSON 对象，但这并不重要。这个想法是让 react-router 通过 URL 请求而不是自己处理它。
所以这里有两种情况：用户复制和粘贴yourserver.com/api/some_json，并且永远不会调用 react-router，因为您的服务器没有响应仅 JSON 的 html/javascript 包。或场景2）您已经在客户端应用程序上，并且您发出正常的get请求ajax.get('/api/some_json')，反应路由器不可能拦截

标签： javascript react-router sockjs

【解决方案1】：

这是我使用 React Router 4 绕过 React Router 的 API 路由的方法。

我必须记住 React Router 是在一个 React 组件中。我们可以在其中使用 JavaScript 并测试 URL。

在这种情况下，我在 URL 的路径名中检查 /api/。如果它存在，那么我什么也不做，完全跳过 React Router。否则，它的路由不是以 /api/ 开头的，我让 React Router 处理它。

这是我的客户端文件夹中的 App.js 文件：

import React from 'react'
import Home from './components/Home'
import AnotherComponent from './components/AnotherComponent'
import FourOhFour from './components/FourOhFour'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

export default function App() {
   const api_regex = /^\/api\/.*/
   // if using "/api/" in the pathname, don't use React Router
   if (api_regex.test(window.location.pathname)) {
      return <div /> // must return at least an empty div
   } else {
      // use React Router
      return (
         <Router>
            <div className="App">
               <Switch>
                  <Route exact path="/" component={Home} />
                  <Route exact path="/another-link" component={AnotherComponent} />
                  <Route component={FourOhFour} />
               </Switch>
            </div>
         </Router>
      )
   }
}

【讨论】：

你能展示一下你是如何在 node.js app.js 的后端设置路由来服务于 react 应用程序和 /api/ 的吗？

【解决方案2】：

您好，我遇到了同样的问题，这是我的解决方案，这是我的 DefaultController，即 React 应用程序的入口点。

class DefaultController extends AbstractController
{
   /**
   * @Route("/{reactRouting}", name="home", requirements={"reactRouting"="^(?!api).+"}, defaults={"reactRouting": null})
   */
  public function index()
  {
    return $this->render('default/index.html.twig', [
        'controller_name' => 'DefaultController',
    ]);
  }
}

请注意，“要求”定义了绕过 /api 路径的正则表达式，并且使用此反应路由器将忽略此路由，请求将由服务器处理。我希望这对你有用。问候！

【讨论】：