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

Prevent React Router from routing a server API path

本文关键字：API 路径 服务器 路由 React Router 防止      更新时间：2023-09-26

服务器端在/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')

下面是我如何在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>
      )
   }
}

嗨，我有同样的问题，这是我的解决方案，这是我的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',
    ]);
  }
}

注意，"requirements"定义了bypass/api路径的正则表达式，通过这个react路由器会忽略这个路由，请求将由服务器处理。我希望这对你有用。的问候!

相关文章：