search

abhijithvijayan / react-minimal-side-navigation

Minimal side navigation component for React
https://codesandbox.io/s/react-minimal-side-navigation-example-y299d?file=/src/components/NavSidebar.jsx
MIT License
67 stars 28 forks source link

If itemId contains questionmark, page reloads. #10

Closed TheFlexican closed 3 years ago

TheFlexican commented 3 years ago

Hi, I'm building my Navigation items with json data, and some items require the itemId to be something like the below.

itemId: "/SomeUrl/account?name=" + item.account_id,

As soon as I introduce the ? into the itemId and I click the item, the page reloads, and thus closing the entire menu.

If i keep the itemId like the below example there is not a problem, and I can keep on navigating the menu.

itemId: "/SomeUrl/account/" + item.account_id,

I would like to use the itemId with the query parameter in it, as it would make my life a whole lot easier. At the moment I'm learning React, and basically transforming your demo code into something i want. Is there anyway you can help me out what is causing this to happen?

Thank you!

abhijithvijayan commented 3 years ago

@TheFlexican can you attach a codesandbox link for me to reproduce this.

Specifically I need the navigation part.

TheFlexican commented 3 years ago

@abhijithvijayan

Thank you for the quick response, here is a codesandbox

https://codesandbox.io/s/react-minimal-side-navigation-example-forked-7ykex

If you open about, and click the member links all is good, same for the teams menu, as soon as you click project link in the about menu, the menu closes and the page reloads.

abhijithvijayan commented 3 years ago

@TheFlexican did you add the <Route path="blah blah" />

in the switching statement for react-router-dom ?

TheFlexican commented 3 years ago

Hi,

I have this in the routes:

<Route path="/SomeUrl/account?name="> <AccountAccess/> </Route>

I pressed enter to quickly, i wanted to say, if have the above in the routes, it doesn't work, i have to keep it to <Route path="/SomeUrl/"> For the page to actually load, but i think that is a different issue?

TheFlexican commented 3 years ago

Sorry, I think this is related to a me problem and not understanding exactly what is going on in your demo code. I figured out, that as soon as you pass in url params into the history.push the whole app reloads. It has nothing to do with your code i guess :)

Sorry for bothering you, I will continue my search to see how I can fix this.

abhijithvijayan commented 3 years ago

@TheFlexican the library just sends that call to the passed callback, the rest of the stuff is user-handled.