react-router 任意数量的路径参数

Question

I'm trying to create route that can handle urls like

/results/create-order/OFR44159995010000/

and

/results/create-order/OFR44159995010000/OFR44159995010001/

and

/results/create-order/OFR44159995010000/OFR44159995010001/OFR44159995010002 and so on, and i can't figure out how i can do this. my Route component looks like so for now:

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

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

Answer 1

Instead of passing your flight id in your route you can pass it as array to your component.

1. Create a 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 .

Answer 2

 <Route
            path="/results/create-order/:flightId"
            component={YourComponent}
        />

You just need to write like that and in your components, you will get flightId then write your business logic

Answer 3

You don't need (OFR\\d+) in your path. flightId will contain whatever id is passed. And you can access it using props.match.params.flightId . The same goes for other Id's ( /:flightId/:anotherFlightId ), you just need to use different names for the Ids.

            <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>;
                }}
            />