Реакт-роутер любое количество путей params - PullRequest
Новая
       4

Реакт-роутер любое количество путей params

0 голосов
/ 15 января 2020

Я пытаюсь создать маршрут, который может обрабатывать URL-адреса, такие как

/ results / create-order / OFR44159995010000 /

и

/ results / create-order / OFR44159995010000 / OFR44159995010001 /

и

/ results / create-order / OFR44159995010000 / OFR44159995010001 / OFR44159995010002 и т. Д., И я не могу понять, как я могу это сделать. мой компонент маршрута пока выглядит так: 

            <Route
                path="/results/create-order/:flightId(OFR\d+)"
                render={props => {
                    console.log(props);

                    return <div>here</div>;
                }}
            />

Ответы [ 3 ]

1 голос
/ 15 января 2020 
Instead of passing your flight id in your route you can pass it as array to your component.

1. create simple route and pass your component to it 



      <Route
        path="/results/create-order)"
        render={YourComponent}
     />



2. then you can pass your flight ids as an array to your component 




    <Link to={{
      pathname: '/results/create-order',
      state: { flightIds : [ pass your flight ids here ] }
    }}> My Link </Link>



3. access your ids in your component using : this.props.location.state.flightIds.
0 голосов
/ 15 января 2020

Вам не нужно (OFR\d+) на вашем пути. flightId будет содержать все, что передано id. И вы можете получить к нему доступ, используя props.match.params.flightId. То же самое относится и к другим идентификаторам (/:flightId/:anotherFlightId), вам просто нужно использовать разные имена для идентификаторов. 

            <Route
                exact
                path="/results/create-order/:flightId"
                render={props => {
                    console.log(props.match.params.flightId); //logs flightId

                    return <div>here</div>;
                }}
            />
             <Route
                exact
                path="/results/create-order/:flightId/:anotherFlightId"
                render={props => {
                    console.log(props.match.params.anotherFlightId); //logs anotherFlightId

                    return <div>here</div>;
                }}
            />
0 голосов
/ 15 января 2020 
 <Route
            path="/results/create-order/:flightId"
            component={YourComponent}
        />

Вам просто нужно написать так, и в ваших компонентах вы получите flightId, а затем написать свою бизнес-логи c

...