[英]React router consume my url request to back-end API
I'm building an SPA react-redux app at client-side, asp.net core back-end API. 我正在客户端asp.net核心后端API上构建SPA react-redux应用程序。 Everythings run perfectly with IISExpress when debugging.
调试时,一切都可以使用IISExpress完美运行。 But when I deploy to IIS as a web application nested default website with the alias "mysubdomain".
但是,当我作为Web应用程序部署到IIS时,嵌套的默认网站的别名为“ mysubdomain”。 Everything still runs ok except export function.
除导出功能外,其他所有操作均正常。
(1st case): Open browser, enter download API link: http://localhost/mysubdomain/api/v1/export?filterparam . (第一种情况):打开浏览器,输入下载API链接: http:// localhost / mysubdomain / api / v1 / export?filterparam 。 A save dialogue open.
保存对话框打开。 That was my expectation.
那是我的期望。
(2nd case: normal case): open my site (homepage): http://localhost/mysubdomain then click export, a new window open by the link: http://localhost/mysubdomain/api/v1/export?filterparam . ( 第二种情况:正常情况):打开我的网站(主页): http:// localhost / mysubdomain,然后单击导出,通过链接打开一个新窗口: http:// localhost / mysubdomain / api / v1 / export?filterparam 。 I was expecting that savefile popup opening similar to (1st case) but NO .
我期待的是类似于(第一种情况)的savefile弹出窗口打开,但是没有 。 Browse return my components/Layout rendered.
浏览返回我的组件/呈现的布局 。
I don't know what happening with react router/route? 我不知道反应路由器/路由会发生什么? Or I make something wrong?
还是我做错了什么? I guess that react-router just consume my URL-request then render my Component, instead of call to my back-end API.
我猜想react-router只会消耗我的URL请求,然后渲染我的组件,而不是调用我的后端API。
My export function inside redux store: 我在redux存储中的导出功能:
export: (filterParams) => async (dispatch, getState) => {
const url = `api/v1/export?${filterParams}`;
window.open(url,'_blank');
}
Back-end API: 后端API:
[HttpGet]
[Route("download")]
public async Task<IActionResult> Download(DailyDischargeUrlQuery urlQuery)
{
var stream = await _dailyDischargeRepository.ExportAsCsvStream(urlQuery.DischargeDate, urlQuery.MRN, urlQuery.GetCompanies(), urlQuery.GetOrders());
return File(stream, "text/csv", "dailydischarge.csv");
}
index.js index.js
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const history = createBrowserHistory({ basename: baseUrl });
const initialState = window.initialReduxState;
const store = configureStore(history, initialState);
const rootElement = document.getElementById('root');
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>,
rootElement);
registerServiceWorker();
App.js App.js
import 'core-js';
import React from 'react';
import {Route, Router} from 'react-router';
import Layout from './components/Layout';
import Home from './components/Home';
export default () => (
<Layout>
<Route exact path='/' component={Home}/>
</Layout>
);
The problem has been resolved! 这个问题已经解决! That because of service worker built-in create-react-app.
这是因为服务人员内置了create-react-app。
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.