So Currently I have my Button & Link set up in react like this
<NavLink to="/register">
<NavBtnLink>Register Now</NavBtnLink>
</NavLink>
My Link from React-Router-Dom is named as NavLink
Putting my Link outside of the button does not route to anything
If i set it up like this it works
<NavBtnLink>
<NavLink to="/register">Register Now</NavLink>
</NavBtnLink>
Cant seem to figure out why it wont work when placed outside so it covers the whole button when you click
to route to /register
Heres a screenshot as well
Code Screenshot
Related
Right now I'm trying to make it so that when I click on the text on the navbar it'll scroll down to the section in nextjs. I have the following code:
<Link href="#About">About</Link>
<Link href="#Sponsors">Sponsors</Link>
<Link href="#FAQ">FAQ</Link>
This is the navbar, when I click about sponsors for example i want to go down to the page to sponsors
Where about, sponsors, and faq are sections on the page as you can see here:
So this is working but it OPENS A NEW TAB which I don't want. I want it to scroll down to where sponsors is.
Some information:
Sponsor
About
and FAQ are their own components that I want to scroll to
you need to have all your Sponsors, About, FAQ components in for example "home.jsx"
and they must have the id of "Sponsors", "About", "FAQ"
now you can use
<a href="#Sponsors"/>
<a href="#About"/>
<a href="#FAQ"/>
to make the page to scroll to the section you want.
but if you want to render each component in different url you cannot use this method and you must use nextjs <Link> to go to the other page like
http://localhost:3000/Sponsors
http://localhost:3000/Sponsors
http://localhost:3000/Sponsors
I am working in SPA with React and React Router and I have configured my routes already. I have in the "HomePage" an icon to open the Menu, but when the user navigates into some option, a "backArrow" icon is used to navigate to the previous page with the:
<IconButton
onClick={ () => navigate( -1 ) }
>
<ArrowBack />
</IconButton >
So far so good. My issue is that I have one resource in the app where the user navigates to a folder in /public and then comes back to the app. I don't want the user to visit that resource clicking the ArrowBack, but only when clicking the specific button. Visiting that resource is done with:
<Button>
<Link href={ LinkToPublicResource } >GO</Link>
</Button>
Notice that the "Link" is not the one from React Router but from Material UI in order to format the style of the link.
How could I avoid that link to be included in History so the user does not comes back to it clicking in the BackArrow? Is it possible some workaround to ignore visits to this resource for React Router?
My issue is that the when the user is navigating through the menu a usual navigation would be:
1) / --> 2) /posts --> 3) /posts/post:id --> 4) ExternalResource
After visiting the ExternalResource, the user comes back to "3) post:id" where the BackArrow icon is found, and clicking it, which triggers the navigate(-1) goes again to the ExternalResource but I would like the user to go back to /posts.
I hope I have explained a little better the issue. Thanks.
I'm trying to use the NavLink's isActive prop to check whether the link's route is the current route to apply some visual styling.
Whenever I navigate to a page it works correctly as expected. However, if I tap a link while I'm inside a page, the changes aren't reflected to the components. The page and the address (which I presume is using history.pushState, which might be the culprit) updates instantly (without an actual HTTP page reload) but the old page still has the isActive property and the new one doesn't.
If I refresh the page which performs an actual "hard" reload, then the change is reflected.
Here is the relevant parts of the code (with actual paths anonymized) (styles is my imported module CSS with the relevant styles):
function NavigationBar(props:NavigationBarProps){
return <div className={styles['container']}>
<NavLink to={'/first'} className={props => `${styles['link']} ${props.isActive ? styles['selected'] : ''}`}>
first
</NavLink>
<NavLink to={'/second'} className={props => `${styles['link']} ${props.isActive ? styles['selected'] : ''}`}>
second
</NavLink>
<NavLink to={'/third'} className={props => `${styles['link']} ${props.isActive ? styles['selected'] : ''}`}>
third
</NavLink>
</div>
}
What am I doing wrong and how can I get it to work correctly (without implementing path changes manually and without disabling using history API, of course)?
I am on React 18.0.1, React-DOM 18.1.0, React-Router 6.3.0, React-Router-DOM 6.3.0 and connected-react-router 6.9.2.
UPDATE: I've also tried ditching connected-react-router (as it's suggested that it doesn't fully support react-router 6.x and seems like a dead library) and moving completely to https://github.com/salvoravida/redux-first-history yet still have the exact same problem.
UPDATE 2: This problem seems to be happening on Safari. It works correctly on Chrome and Firefox.
Maybe you want something like this example CodeSandbox
I am using React Bootstrap NavLink to main navigation. What I'm trying to do is:
Allow opening in new tab with correct route (no checking if it should be left needed)
If user wants to change current tab page - check if it should be left (eg some changes on current page may not be saved)
My current version looks like this:
{paths && paths.map(path =>
<NavLink href={path} onSelect={this.handleOnSelect}>
{path}
</NavLink>
}
And works quite alright, but the problem starts when my url looks like domain.com/a/b. Let's assume I click on c, navLink creates route domain.com/a/c instead of domain.com/c. I tried using href={`/${path}`} and routing worked fine but it was ignoring onSelect.
Does anyone have an idea how this could be solved? Is that even possible to accomplish?
In my application I am using react router 3
For navigation menu i have used
<nav>
<NavItem> </NavItem>
</nav>
It is working fine on click of nav menu but when going back using browser back, the url changed but the active class does not applied.
I will try to explain how it should be done generally, not framework specific. you can implement the same in any framework after that
in order to make stateful navigation, You can take advantage of query parameters.
all you have to do on click of the nav you have to append some value to the query parameters which will identify its uniqueness.
and on the component initialization you have to read the query params and programmatically select that tab.(apply css class to it)
For example, you have:
url:somedomain.com/home -- this is where you have navigation
NavItem1 href="somedomain.com/home?nav=tab1"
NavItem2 href="somedomain.com/home?nav=tab2"
NavItem3 href="somedomain.com/home?nav=tab3"
when the component initializes , you have to read the query params if exists and give the appropriate class to the particular NavItem