How to pass a variable between web pages when using Reactjs Router Switch to navigate

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:

On Home page, user selects scenario and presses Load
Load in fact calls a renderRedirect() function, and triggers navigation to the Scenario page.
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'));

Please post the relevant switch/route code. Is the redirect a total page load or a route change? What version of React Router is this? — Alex W
– Alex W, Commented Aug 7, 2018 at 14:12
@AlexW , ok: did that, it's the latest version (that's what it says in my packages - not sure how to check the version number) — levraininjaneer
– levraininjaneer, Commented Aug 7, 2018 at 15:57

JoseCarlosPB · Accepted Answer · 2018-08-07 14:02:12Z

2

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

answered Aug 7, 2018 at 14:02

JoseCarlosPB

8752 gold badges16 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

levraininjaneer Over a year ago

Thanks! Testing this now. How would that URL look in the browser. Assume the id is "demo_sc", then the URL would be ".../scenario/:demo_sc" ? ".../scenario/id:demo_sc" ? ".../scenario/demo_sc" ?

levraininjaneer Over a year ago

the answer to the above question is the the third option .../scenario/demo_sc. Thanks so much for the help!

Collectives™ on Stack Overflow

How to pass a variable between web pages when using Reactjs Router Switch to navigate

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related