获取 class 组件路由器 V6 中的 url 参数反应

Question

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)
}

Answer 1

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");

  ...
}