React router same path with other query Param

user_7259165 0
Viewed 828

Is it possible with react-router to change the route if the queryParam changes but the path stays the same? I have defined two routes:

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={List} />
    <Route path="/=" component={Content} />
  </Switch>
</BrowserRouter>

My List view basically shows a list of items. When someone clicks on the item the url should be changed to /?content=content-id.

The final application should have the following routes:

"/" => render List View
"?content=content-id" => render Content View

Thanks for your help

react-router-dom react-router reactjs
1 Answers

first you can do the following

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={List} />
    <Route path="/:id=" component={Content} />
  </Switch>
</BrowserRouter>

in the Contect.js:

let { id } = useParams();//if it's func component

Or

    this.props.history.push({
      pathname: '/template',
      search: '?query=abc',
      state: { detail: response.data }
<Link to={{
      pathname: '/template',
      search: '?query=abc',
      state: { detail: response.data }
    }}> My Link </Link>
})

in the second way you can do a query and send state with it.

user_135821000
Related