使用Reactjs Router Switch导航时如何在网页之间传递变量

Question

I am working on a web application that can load one of several scenarios based on a selection that a user makes.

A webpage has already been implemented to load a scenario, which is initiated by making an API call to the back end (python via flask).

The web-based UI is in javascript making use of react js.

At the moment I use the Router Switch method to allow navigation between a few web pages.

What I would like to achieve is:

1. On Home page, user selects scenario and presses Load
2. Load in fact calls a renderRedirect() function, and triggers navigation to the Scenario page.
3. Upon arrival on the Scenario page, the API call to the back-end is made requesting the creation of the specific scenario that the user had selected in step 1.

What I don't know is how to get the information (just a string scenario_id ) from the Home page to the Scenario page.

I found this question/answer , but to implement it I would have to rework my current Switch setup to instead make use of router.push , unless I am mistaken?

Here is my current Routing code:

render((
    <BrowserRouter>
        <Switch>
            <Route exact path='/new-scenario' component={NewScenario}/>
            <Route exact path='/about' component={About}/>
            <Route exact path='/' component={Home}/>
        </Switch>
    </BrowserRouter>
), document.getElementById('root'));

Answer 1

If I understood you only want the scenario_id, I think you can do it via url params

if you select scenario_id 1 on home page your url can be something like /scenario/1

so you could define your route like this

       <Route exact path="/scenario/:id" render={props => <ScenarioComponent {...props} /> } />

with this code you're sending the :id part of the url to your component via props you can get the value on Scenario with

this.props.match.params.id