У меня есть файл маршрутизатора, в который я передаю параметры запроса функциональному компоненту.Я использую response-router-dom, как я могу получить параметры запроса в функциональном компоненте?
Рассматриваемая строка, которая отправляет параметры:
<Route path="/reports/daily-sales-single/:date_from" component={DailySalesSingle} />
Здесь я отправляю параметр date_from,Я видел разные способы, но ни один из них не видит убедительного в том, как это сделать, или кажется устаревшим.Также в каждом уроке, похоже, используются люди, использующие компоненты класса.
Файл маршрутизатора:
import * as React from 'react';
import {
BrowserRouter as Router,
Route,
Switch,
} from 'react-router-dom';
import { asyncComponent } from '@hoc/index';
import { useSpring, useTransition, animated } from 'react-spring';
import useRouter from '@hooks/useRouter';
import Error from '@containers/Error/index';
const Home = asyncComponent(() => import(/* webpackChunkName: "js/chunks/home" */ '@containers/home').then(
module => module.default,
));
const RatesOverview = asyncComponent(() => import(/* webpackChunkName: "js/chunks/ratesoverview" */ '@containers/RatesOverview').then(
module => module.default,
));
const CreateRate = asyncComponent(() => import(/* webpackChunkName: "js/chunks/createrates" */ '@containers/CreateRates').then(
module => module.default,
));
const CopyRate = asyncComponent(() => import(/* webpackChunkName: "js/chunks/createrates" */ '@containers/CreateRates/copyRate').then(
module => module.default,
));
const RateHurdleOverview = asyncComponent(() => import(/* webpackChunkName: "js/chunks/hurdleOverview" */ '@containers/RateHurdleOverview').then(
module => module.default,
));
const DailySalesSingle = asyncComponent(() => import(/* webpackChunkName: "js/chunks/dailysalessingle" */ '@containers/Reports/DailySalesSingle').then(
module => module.default,
));
const DailySalesGroup = asyncComponent(() => import(/* webpackChunkName: "js/chunks/dailysalesgroup" */ '@containers/Reports/DailySalesGroup').then(
module => module.default,
));
const WeeklySalesSingle = asyncComponent(() => import(/* webpackChunkName: "js/chunks/weeklysalessingle" */ '@containers/Reports/WeeklySalesSingle').then(
module => module.default,
));
const WeeklySalesGroup = asyncComponent(() => import(/* webpackChunkName: "js/chunks/weeklysalesgroup" */ '@containers/Reports/WeeklySalesGroup').then(
module => module.default,
));
const Settings = asyncComponent(() => import(/* webpackChunkName: "js/chunks/settings" */ '@containers/Settings').then(
module => module.default,
));
const CreateRateHurdle = asyncComponent(() => import(/* webpackChunkName: "js/chunks/hurdlecreaterate" */ '@components/Forms/CreateRateHurdle').then(
module => module.default,
));
const RatesGrid = asyncComponent(() => import(/* webpackChunkName: "js/chunks/ratesgrid" */ '@containers/RatesGrid').then(
module => module.default,
));
const GroupDasboard = asyncComponent(() => import(/* webpackChunkName: "js/chunks/groupdashboard" */ '@containers/Group/Dashboard').then(
module => module.default,
));
const Routes = () => {
/* eslint-disable no-shadow */
const { location } = useRouter();
const transitions = useTransition(location, location => location.pathname, {
from: {
opacity: 0,
position: 'absolute',
width: '100%',
transform: 'translate3d(-100%, 0, 0)',
},
enter: {
opacity: 1,
transform: 'translate3d(0, 0, 0,)',
},
leave: { opacity: 0, transform: 'translate3d(150%, 0, 0)' },
});
/* eslint-enable no-shadow */
return transitions.map(({ item, key, props }) => (
<>
<div className="app-page">
<animated.div className="app-content" key={key} style={props}>
<Error />
<Switch location={item}>
<Route exact path="/" component={GroupDasboard} />
<Route path="/rates/overview" component={RatesOverview} />
<Route path="/rates/create" component={CreateRate} />
<Route path="/rates/grid" component={RatesGrid} />
<Route path="/rates/copy/:rate_id" component={CopyRate} />
<Route path="/rates/hurdle/create" component={CreateRateHurdle} />
<Route path="/rates/hurdle" component={RateHurdleOverview} />
<Route path="/reports/daily-sales-single/:date_from" component={DailySalesSingle} />
<Route path="/reports/daily-sales-group" component={DailySalesGroup} />
<Route path="/group/dashboard" component={GroupDasboard} />
<Route path="/reports/weekly-sales-single" component={WeeklySalesSingle} />
<Route path="/reports/weekly-sales-group" component={WeeklySalesGroup} />
{ /* <Route path="/settings" component={Settings} /> */}
</Switch>
</animated.div>
</div>
</>
));
};
export default Routes;
Функциональный компонент:
import * as React from 'react';
import { connect } from 'react-redux';
import * as actions from '@actions/index';
import { QuickSearchMenu, WeeklyQuickSearchMenu } from '@constants/DateLists';
import { SearchBarDatesSchema } from '@constants/Yup/SearchBarDatesSchema.ts';
import { ToggleWithLabel } from '@components/inputs/index';
import PageHeader from '@components/Header/PageHeader';
import {
Jumbotron,
Container,
Row,
} from 'react-bootstrap';
import {
Formik,
Form,
Field,
} from 'formik';
import { log } from 'util';
import Title from './Title';
import SearchBy from './SearchBy';
import QuickSearch from './QuickSearch';
import Dates from './Dates';
import Properties from './Properties';
import DepartmentToggle from './DepartmentToggle';
import DepartmentTitle from './DepartmentTitle';
import RunReport from './RunReport';
import AdvSearch from './AdvSearch';
import AdvSearchToggle from './AdvSearchToggle';
import Options from './Options';
interface StateProps {
isModalOpen: boolean;
isSidebarOpen: boolean;
}
interface InitialProps {
page: any;
title: any;
subTitle: string;
dataLocal: any;
type: string;
}
interface DispatchProps {
getAllDepartments: (payload: any) => void;
getAllPaymentMethods: (payload: any) => void;
}
type Props = InitialProps & StateProps & DispatchProps;
function mapDispatchToProps(dispatch: React.Dispatch<any>): DispatchProps {
return {
getAllDepartments: payload => dispatch(actions.Reports.getAllDepartments(payload)),
getAllPaymentMethods: payload => dispatch(actions.Reports.getAllPaymentMethods(payload)),
};
}
const Header = ({
page,
title,
subTitle,
dataLocal,
getAllDepartments,
getAllPaymentMethods,
type,
}: Props) => {
const [department, setDepartment] = React.useState({ status: true });
const [advSearch, setAdvSearch] = React.useState({ status: false });
const [quickSearchDates, setQuickSearchDates] = React.useState({
dateName: null,
fromDate: null,
toDate: null,
});
const [apiDates, setApiDates] = React.useState({
fromDate: null,
toDate: null,
});
const [netOrGross, setNetOrGross] = React.useState(true);
const updateQuickSearchDates = () => {
if (apiDates.fromDate === null && apiDates.toDate === null) {
const today = new Date();
setQuickSearchDates({
dateName: 'Today',
fromDate: today,
toDate: today,
});
}
};
const getQuickSearchMenu = () => ((
page === 'weekly-sales-single'
|| page === 'weekly-sales-group')
? WeeklyQuickSearchMenu
: QuickSearchMenu);
const disableComponent = () => ((
page === 'weekly-sales-single'
|| page === 'weekly-sales-group')
// eslint-disable-next-line
? true
: false);
const onChange = (e: MouseEvent | KeyboardEvent) => {
setNetOrGross(e.target.value);
};
return (
<div className="daily-sales-header">
<PageHeader title={title} helpPage="help">
<Container fluid>
<Formik
validateOnChange
initialValues={{}}
validationSchema={SearchBarDatesSchema}
onSubmit={(values, { setSubmitting }) => {
updateQuickSearchDates();
getAllPaymentMethods({
type,
apiDates,
});
getAllDepartments({
type,
department,
apiDates,
});
setSubmitting(false);
}}
>
{({
isSubmitting,
handleSubmit,
}) => (
<Form onSubmit={handleSubmit}>
<Row>
{/* { page === 'daily-sale-single' && (
<SearchBy
colClass="search-by-col"
buttonId="search-by-button"
buttonLabel="Search by"
/>
)} */}
<QuickSearch
buttonLabel="Quick Search"
eleClass="quick-search"
eleIdBtn="quick-search-button"
quickSearchMenu={getQuickSearchMenu()}
setQuickSearchDates={setQuickSearchDates}
getQuickSearchDates={quickSearchDates}
disable={disableComponent()}
/>
<Field
fromClass="from-date"
fromLabel="From"
toClass="to-date"
toLabel="To"
setQuickSearchDates={quickSearchDates}
setApiDates={setApiDates}
component={Dates}
disable={disableComponent()}
/>
{ page === 'daily-sale-groups' && (
<Properties
colClass="search-by-col"
buttonId="search-by-button"
buttonLabel="Properties"
/>
)}
{ (page === 'daily-sale-single'
|| page === 'weekly-sales-single'
|| page === 'weekly-sales-group') && (
<DepartmentToggle
buttonOneLabel="Department"
buttonTwoLabel="Sub-Department"
variantSelected="primary"
variantUnSelected="outline-primary"
setDepartment={setDepartment}
status={department.status}
isSubmitting={isSubmitting}
disable={disableComponent()}
/>
)}
<RunReport
buttonLabel="Run Report"
isSubmitting={isSubmitting}
departmentToggle={department.status}
disable={disableComponent()}
/>
</Row>
<AdvSearch
advSearchToggle={advSearch.status}
/>
<Row>
<AdvSearchToggle
buttonClass="adv-search-btn pull-right"
buttonLabel="Advanced Search"
setAdvSearch={setAdvSearch}
status={advSearch.status}
/>
</Row>
</Form>
)}
</Formik>
</Container>
<Row>
<DepartmentTitle
title="Department"
departmentToggle={department.status}
departmentClass="display-title"
/>
<div className="col-md-auto">
{ (page === 'weekly-sales-single'
|| page === 'weekly-sales-group') && (
<div className="col-md-auto">
<ToggleWithLabel
label="Net / Gross"
field={{
onChange,
value: netOrGross,
name: 'net_or_gross',
}}
/>
</div>
)}
</div>
<Options
data={dataLocal}
/>
</Row>
</PageHeader>
</div>
);
};
export default connect(null, mapDispatchToProps)(Header);