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
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>
);
}
}
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.