CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
jak111
jak111

Reputation: 561

React router same path with other query Param

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

Upvotes: 2

Views: 1824

Answers (1)

TalOrlanczyk
TalOrlanczyk

Reputation: 1213

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.

Upvotes: 1

Related Questions