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

Filip Wojciechowski · Accepted Answer · 2018-10-16 14:01:39Z

1

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/

answered Oct 16, 2018 at 14:01

Filip Wojciechowski

3492 silver badges5 bronze badges

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

Collectives™ on Stack Overflow

React query strings take more than 1 parameter?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related