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

Question

在服务器上，仅在/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')

Answer 1

以下是我如何使用 React Router 4 为我的 API 路由绕过 React Router。

我必须记住 React Router 位于 React 组件中。我们可以在其中使用 JavaScript 并且可以测试 URL。

在本例中，我检查/api/URL 的路径名。如果它存在，那么我什么都不做并完全跳过 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>
      )
   }
}