React query strings take more than 1 parameter?

Question

I'm working with React.js Router and trying to achieve this:

Users go to a module then a level and the url will look like this: myapp.com/game/module/some-module/level/level-1. I need to handle all different module and level like this: /module/:name /level/:name so I don't need to specify each url several times.

Here's the code in App.js:

const App = () =>
    <Router>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/game" component={Game} />
            <Route exact path="/module/:name" component={Module} />
            <Route exact path="/level/:name" component={Level} />
            <Route component={NoMatch} />
        </Switch>
    </Router>

export default App

I know I can "grab" the value of module name in the child like this: match.params.name.

How do I do it in React? Do you have a better approach than this?

e.g. /game/some-module/some-level, in this case, how do you pass the module name and level name in the Route

score 1 · Accepted Answer · answered Oct 16 '18 at 14:01

It looks like the Level route should be nested inside the Module component.

Here's a similar discussion on Stack Overflow: Nested routes with react router v4

And here's a good blog post that explains how nested routes work in React Router v4: https://tylermcginnis.com/react-router-nested-routes/

React query strings take more than 1 parameter?

1 Answers1