0

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'));
levraininjaneer
  • 1,157
  • 2
  • 18
  • 38
  • 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 Aug 07 '18 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 Aug 07 '18 at 15:57

1 Answers1

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
JoseCarlosPB
  • 933
  • 2
  • 14
  • 29
  • 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 Aug 07 '18 at 16:11
  • the answer to the above question is the the third option `.../scenario/demo_sc`. Thanks so much for the help! – levraininjaneer Aug 07 '18 at 16:16