服务器端在/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路由器会忽略这个路由,请求将由服务器处理。我希望这对你有用。的问候!