I've updated my project from router v5 to v6. now I can't read the URL params using queryString.parse(this.window.location)
is there a way to get the parameters in a class component router V6? following is my code.
App.js
function App(){
return(
<Routes>
<Route path="/bookingSummary" element={<BookingSummary/>}/>
</Routes>
)}
bookingSummary.js(class component)
componentDidMount() {
movieInfo = queryString.parse(this.window.location)
}
Depending on what queryString
is I think you might only need to pass the search
string from the window.location
object, eg queryString.parse(this.window.location.search)
.
You should use the useSearchParams
hook though to access the queryString parameters object. If you are using a class-based component you'll still need to either convert to a React function component in order to use the React hooks, or utilize the custom withRouter
implementation to access the queryString params and inject that also as props.
Example:
import { useSearchParams, /* other hooks */ } from 'react-router-dom';
const withRouter = WrappedComponent => props => {
const [searchParams, setSearchParams] = useSearchParams();
// etc... other react-router-dom v6 hooks
return (
<WrappedComponent
{...props}
{...{ searchParams, setSearchParams, /* other injected props */} }
/>
);
};
Decorate the BookingSummary
component.
export default withRouter(BookingSummary);
Access the injected props.
componentDidMount() {
const { searchParams } = this.props;
const movieInfo = searchParams.get("movieInfo");
...
}
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.