score:5
try the render
function prop instead of component
prop of route
. something like this:
<route render={props => {
// look for some param in the query string...
const usecomponenta = querystringcontains('a');
if(usecomponenta) {
return <componenta {...props}/>;
} else {
return <componentb {...props}/>;
}
}}/>
score:5
there are 2 ways to do that:
1) use location.search
in react component to get the query string, then pass it to child component to prevent re-rendering the whole component. react-router has the official example about this.
2) define a regex path of router to catch the query string, then pass it to react component. take pagination as an example:
routes.js, for router config you can refer this
const routerconfig = [
{
path: '/foo',
component: 'foo',
},
{
path: '/student/listing:pagenumber(\\?page=.*)?',
component: 'student'
},
student.js
render() {
// get the page number from react router's match params
let currentpagenumber = 1;
// defensive checking, if the query param is missing, use default number.
if (this.props.match.params.pagenumber) {
// the match param will return the whole query string,
// so we can get the number from the string before using it.
currentpagenumber = this.props.match.params.pagenumber.split('?page=').pop();
}
return <div>
student listing content ...
<pagination pagenumber = {currentpagenumber}>
</div>
}
pagination.js
render() {
return <div> current page number is {this.props.pagenumber} </div>
}
the 2nd solution is longer but more flexible. one of the use cases is server sider rendering:
apart from the react components, the rest of the application (e.g. preloaded saga) need to know the url including query string to make api call.
Source: stackoverflow.com
Related Query
- React Router 3, exactly match against query param
- Why does React Router v6 seem unable to remove query string param from URL?
- React router same path with other query Param
- React router 4 appending extra query param
- React Router Pass Param to Component
- React doesn't reload component data on route param change or query change
- React Router Redirect drops param
- How to remove query param with react hooks?
- React Router v4 - Redirect to same route with different query params
- React Router Match Miss
- React router v4 redirect when no match
- Match multiple path with react router v4
- React Router 4 Match returns undefined
- How to parse a query string in React Router
- How to pass the match when using render in Route component from react router (v4)
- React Router v4 Nested match params not accessible at root level
- React Router 4 Regex paths - match doesn't find parameters
- How would I test for a react router route param in react-testing-library?
- React Router: Query Param Match?
- Firing callback on query change in react router
- React router v4 history.push to the same route (different query params) in Functional Component (use Hooks API)
- React Router 4 and exact path with dynamic param
- How can I match if the current route matches a pattern in React Router Dom v6?
- React router appending query to URL
- hide id or query string while passing through react router
- How to match ambiguous path and static path with React Router
- How can I exactly match routes nested deeply in react router 6?
- How can i use param in path as prop react router dom v6
- Add multiple value of query parameter react router browerhistory
- React Router V6 change component based on query string
More Query from same tag
- Display nested loops object in html list ul li
- Show hide content onClick in react JS
- Using Auth0 React Hook on all Axios requests
- How to load data if needed ? React / Redux. No SSR
- Where does the root reducer come from in this redux react example and how does dispatch knows which reducer to go?
- Changing values while sorting visualization
- Problem when updating a value in multiple places on redux
- Update flat list item onPress
- How to use props variable for css-modules className?
- Update specific object value contained within an array of objects in React
- Component won't reload with new data when route parameters change
- React animate fade-in and fade-out with CSSTransitionGroup on conditionally rendered component
- Jest to test a class method which has inner function
- What is the best way of keeping database in sync with the Redux store (redux middleware)?
- How can I override form-control class from a reactstrap input?
- Reactjs: useState state value is empty when updating it inside another function with onChange
- Optimize the function in React. Having setState key as a props?
- How to add a button in infowindow with google-maps-react?
- I want to create a button inside a cell of react-table column
- Next js: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
- React Redux combineReducers function calls my reducers 2 times when its exported and an additional time in the createStore function
- Use i18next with coreUI react sidebar
- Formik and Material-UI
- Meteor-React Error: Target Container is not a DOM element, after fix
- Override Material UI component with SASS classes
- Apache Solr heatmap : How to convert in usable coordinate int2d array returned by heatmap
- CSS doesn't shows when load a component
- Update string based on switch case
- how to cancel an axios call after some specific time
- MIME type ('text/html') is not executable, and strict MIME type checking is enabled