Query params in React Router

Question

I am using React Router & I have a nested route which have a query parameter called ?q & my routing code looks like this:

<Route path="/" component={TopNavContainer}>
    <Route path="search?que=:q" component={SearchContainer} />
</Route>

but when I try to access my route as http://localhost:8000?q=machine It only loads the content of the parent container which is TopNavContainer.

Any help is appreciated.

Regards Vaibhav

I think no need to specify query param in route configurations. You can easily remove ?que=:q. and you can catch query params inSeachContainer by this.props.location.query or use incomponentWillReceiveProps by nextProps.location.query each time query changed — Hieu Tran
– Hieu Tran, Commented Sep 23, 2016 at 6:25

WitVault · Accepted Answer · 2016-09-23 07:43:33Z

1

It could also be the case that you have forgot to render any child component corresponding to route changes inside parent main component which in your case is TopNavContainer.

import React, { Component } from 'react';

export default class TopNavContainer extends Component {

    render() {
        return (
            <div className="topNavContainer">
                {this.props.children}
            </div>
        );
    }
}

answered Sep 23, 2016 at 7:43

WitVault

24.2k20 gold badges107 silver badges137 bronze badges

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

1 Comment

Vaibhav Jain Over a year ago

Nope, that's not the case

RJardines · Accepted Answer · 2016-09-23 19:10:37Z

0

For this route configuration

<Route path="/" component={TopNavContainer}>
    <Route path="search?que=:q" component={SearchContainer} />
</Route>

Your url (http://localhost:8000?q=machine) don't match the path, the correct should be http://localhost:8000/search?que=machine

As a recommendation for SEO, the url could be

<Route path="search/:q" component={SearchContainer} />

that match http://localhost:8000/search/machine

answered Sep 23, 2016 at 19:10

RJardines

8709 silver badges20 bronze badges

1 Comment

Ramon Dias Over a year ago

This is a route parameter. The OP is looking for query parameters.

Collectives™ on Stack Overflow

Query params in React Router

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related