问React路由器不会拦截HTTP/S请求
EN

Stack Overflow用户

提问于 2021-05-03 17:11:27

回答 2查看 240关注 0票数 1

我对React Router的理解是，一旦单个页面在客户端启动，随后对路由的所有调用都不会转到服务器。它们被React Router拦截。但是为什么我的应用总是向服务器发出HTTP请求呢？尽管有React Router代码？当我在浏览器开发工具上看到网络时，我总是看到为每个"react routed“路由发出一个网络请求。

我测试了这个应用程序，首先启动服务器，然后传递索引文件，然后在客户端渲染完成后停止服务器。然后我尝试从客户端应用程序访问另一个路由，例如"/contactus“，但是请求似乎到达了服务器(现在没有运行)，因此客户端没有得到任何文件，浏览器变成空白。我的理解是，一旦客户端完成应用程序的引导，React Router就会拦截所有API调用。

然后，我通过执行函数(“/*”，app.get (req，res) { res.sendFile(path.join(__dirname，"../dist"，"landing_page.html"))；})修改了服务器端代码；

现在，这个应用程序可以工作了。但这违背了React Router的全部目的，因为所有请求都会去往服务器。那么什么是React Router呢？它是否只用于路由而不用于拦截？是否有React Router的任何变体来拦截请求？或者我应该使用像历史API这样的东西？这是我的代码。

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
 
} from "react-router-dom";

class App extends React.Component {


  render() {
      return (
      <Router>
            <Switch>
            <Route exact path="/">
              <div className="banner">
                <Banner />
              </div>
            </Route>
          </Switch>
          <Switch>
            <Route exact path="/cloudautomation">
              <div style={{ position: "absolute", top: "15%", zIndex: "-1" }}>
                <CloudAutomation />
              </div>
            </Route>
          </Switch>
          <Switch>
            <Route exact path="/marketingautomation">
              <div style={{ position: "absolute", top: "15%", zIndex: "-1" }}>
                <MarketingAutomation />
              </div>
            </Route>
          </Switch>
          <Switch>
            <Route exact path="/contactus">
              <div style={{ width: "100%" }}>
                <ContactUs />
              </div>
            </Route>
          </Switch>
        </div>
        </Router>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("main"));

reactjs

react-router

回答 2

Stack Overflow用户

发布于 2021-05-03 17:21:09

React-router-dom通常用于防止您的页面在路由通过您自己的网站时重新加载每个资产，从而提供SPA体验。

如果你想拦截请求，你可以使用axios。

他们自己的文档中的示例：

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

票数 1

Stack Overflow用户

发布于 2021-05-03 20:03:26

有几分正确。

React-router将“拦截”任何呼叫，并随后执行客户端路由。不会对每个请求都有一个服务器调用。但是，某些场景会触发对服务器的调用，这(通常)会导致服务器使用所有(通常)请求的路径的index.js文件进行响应。例如，如果您手动刷新页面。在您的示例中，您似乎正在这样做，因为您似乎没有使用“链接”，而是在地址栏中键入路径。

如果你添加下面的内容；

<Link to='/'>Banner</Link>
<Link to='/cloudautomation'>Cloud Automation</Link>
<Link to='/marketingautomation'>Marketing automation</Link>
<Link to='/contactus'>Contact us </Link>