I've been struggling with that issue for 2 hours or so and can't find a way to do it.
I would like to update my url hash (#home, #about etc..) when i'm scrolling through those sections and by the same way highlight the current section in my navbar. I've found different answers in Jquery but the thing is that i'm using ReactJS and i've been told that it is not a good idea / useful to use Jquery with ReactJS.
I've also found and tried this package : https://www.npmjs.com/package/react-scrollable-anchor
But the problem is the hash update only when the scrolling is over.
Edit :
<ul>
<li>
<a href="#">Home</Link>
</li>
<li>
<a href="#about">About</Link>
</li>
<li>
<a href="#skills">Skills</Link>
</li>
</ul>
When i'm clicking on About my url then goes as : localhost:3000/#about and automatically scroll to this section, everything is fine from here.
But if I scroll(without clicking anywhere) to the Skills section then i want the url to automatically go to localhost:3000/#skills and the navbar hightlight the Skills.
Hope you can help me through this issue. Thanks !
You should simply use 'react-router-dom' library for routing and handling Url paths. they has very clear documentation https://reactrouter.com/web/example/basic.
For You help
Simply define the path in the to prop of Link where you want to go !
<ul>
<li>
<Link to="/test">Home</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
Now simply navigate to that declared path by wrapping it in the
<Route exact path="/test">
<Home />
</Route>
By doing all this.Url Hash will not been a problem any more ;)
Related
I have this piece of code in my HTML component.
<ul>
<li *ngFor="let item of items">
{{item.name}}
<span *ngIf="item.Description" class="text-muted"> {{item.Description}}</span>
</li>
</ul>
I requested an "item" object from an API and it has the property
item.link and item.name.
My problem is that from the API that I get, the value that I get from item.link might have full URL address to an item (something like "https://stackoverflow.com") or some short URL (like "www.google.com").
My goal is just to be able to handle the differences in link given back by the API, so that when clicked, it goes to the right page.
I would like for the href to update so that it adds the "https://" in front of links like "www.google.com" everytime it goes through items in the for loop.
I tried adding "//" in front of "item.link" in the a tag. It fixes the item.link when it's the short URL without the https but breaks the link with https already in item.link.
Any help would be much appreciated. :)
Thanks in advance.
Why not check if it already has https and then consuming it?
<ul>
<li *ngFor="let item of items">
{{item.name}}
<span *ngIf="item.Description" class="text-muted"> {{item.Description}}</span>
</li>
</ul>
You can extend this, or write a custom function to check for other cases like http or if it already has :// and other edge cases.
I want to make a React website and want it to use inpage links. I know that in normal html you can just use:
<a href='#someheader'>link</a>
<h1 id='someheader'>This is an example</h1>
In react though, I am using multiple separate files for each part of the website. So for the navigation bar I have a file and for the body I have a file etc.
I have tried the above technique, but it doesn't seem to work.
Is it because of the link and the place I want the link to go to are in different pages, or is it because of something else?
For this route:
<Route path="/about" component={AboutPage} />
## Link to anchor on same page
<!-- AboutPage.js -->
<a href='#someheader'>Jump to someheader</a>
Go to anchor someheader on the current page (Not related to React-Router - this is simple HTML behavior). a element docs
## Link to anchor on another page (Tricky)
Jump to someheader point on about page.
This code will work (But you do not get the "power/features" of React-Router):
<!-- HomePage.js -->
<!-- Simple href to anchor -->
<a href='about#someheader'>
Go to about page and jump to someheader
</a>
But when using the <Link> component to navigate - the scroll to #hash will not work/scroll.
Related github issue: https://github.com/ReactTraining/react-router/issues/394
<!-- HomePage.js -->
<!-- anchor not working -->
<Link to='about#someheader'>
Go to About page without jumping to #someheader section
</Link >
How to solve this (True to Sep 20)?
Use this package: https://www.npmjs.com/package/react-router-hash-link
More ideas (Related/duplicate stackoverflow Q): Using anchor tags in react-router 4 // How to use normal anchor links with react-router
Check out react-router which should solve your problem.
https://reactrouter.com/web/guides/quick-start
Basically I'm trying to remake some simple web page that I have initially created with HTML and CSS to be working rather on React. I managed to redo the page to correctly display when it was moved into React, however I don't really understand why the navigation links that I have on top do not take me to the corresponding section on the same page anymore as well as why the external links to the project sites also stopped working.
Here is the project link code:
import React from "react";
export default function ProjectTile(props) {
return (
<div className="project-tile" id={props.id}>
<a href={props.href} target="_blank" id={props.link_id}>
<img
className="project_screenshot"
src={props.img_src}
alt={props.img_alt}
/>
<p className="project_name">
<span className="brackets"><</span> {props.title}{" "}
<span className="brackets">/></span>
</p>
</a>
</div>
);
}
All props are getting mapped and loaded from the array with corresponding data where each object looks like this:
{
id: "tribute_page",
link_id: "https://codepen.io/konstantinkrumin/full/PooYQbG",
img_src: "https://i.imgur.com/ynRuzOQ.png",
img_alt: "tribute_page_screenshot",
title: "Tribute Page"
}
The navigation links used are the following:
import React from "react";
export default function Navbar() {
return (
<nav id="navbar">
<a className="nav-link" href="#welcome-section">
About
</a>
<a className="nav-link" href="#projects">
Projects
</a>
<a className="nav-link" href="#contact">
Contact
</a>
</nav>
);
}
And each section they refer to have an id corresponding to the href indicated above.
Here if the link to this project on codesandbox
P.S. Everything used to work correctly when it was on HTML.
Also the contact links that seem to be set in similar way as project links are working.
Here are two things I think I found out:
In the ProjectTile.js file, replace href = {props.href} by href={props.link_id and now project opens in codepen.
About the jump link you have made in nav-bar, I think it's because of problem of codesandbox.
If you manage to make your url to https://op6gq.csb.app#projects instead of https://op6gq.csb.app/#projects. That's gonna work.
Or directly visiting https://op6gq.csb.app/#welcome-section jump link too works well.
It looks like there's no href prop. Sounds like what you want is something like
href={`#${props.id}`}
which would evaluate to href="#tribute_page" in this example.
You Have to try that your page url become:
https://op6gq.csb.app#welcome-section
Not:
https://op6gq.csb.app/#welcome-section
please attend to that / in address bar!
I am trying to add dynamically an id into tag
<a href="/profile?id="{this.state.userInfo.id}>
it's not working. VS code keep saying that I have to add ...
Any idea ? Sorry I am newby in JavaScript and React.
Thanks
If you try to render link like /profile?id=123, where 123 is userId, then you should use template strings to insert variable value to your string.
<a href={`/profile?id=${this.state.userInfo.id}`}>
Now expression in braces would be interpreted and transformed into string with variable value.
But, if you need to make working link with react-router, you need to use Link from react-router-dom. You can find examples here
You need to use string template literal.
<a href={`/profile?id=${this.state.userInfo.id}`}>
In react we dont user the tag for routing insted we use a package/library called react-router-dom for handling routing. You can go throught the documentaion as ther are may ways for dynamic routing in React. Hope this helps. As the tag refreshes the page a may have an unlikely behavior.
you could use <Link> instead of <a> using react-router-dom
this sample is from their website
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
</nav>
</Router>```
I am trying to add a Tripadvisor rating widget to my React website (see code below). At the moment, only the Tripadvisor log is loading, and no rating information. I think the script in the widget is not running, and I'm not sure how to get it to run.
I loaded the script using Helmet, and can see it in the head of my document in the browser. In the same component, I try to render the widget.
//Here is the code of the widget:
<div id="TA_cdsratingsonlynarrow350" class="TA_cdsratingsonlynarrow">
<ul id="80bNGet6b" class="TA_links mE4BAE">
<li id="u9nO7YH4pF" class="aWtKBjB9S">
<a target="_blank" href="https://www.tripadvisor.com/">
<img
src="https://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png"
alt="TripAdvisor"
/>
</a>
</li>
</ul>
</div>
<script
async
src="https://www.jscache.com/wejs
wtype=cdsratingsonlynarrow&uniq=350&locationId=17821239&lang=en_US&border=true&display_version=2"
data-loadtrk
onload="this.loadtrk=true">
</script>
//Here is the code of my attempt:
const Home = () => {
return (
<Layout>
<Helmet>
<script
async
src="https://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&uniq=350&locationId=17821239&lang=en_US&border=true&display_version=2"
data-loadtrk
onload="this.loadtrk=true"
></script>
</Helmet>
<div id="TA_cdsratingsonlynarrow350" class="TA_cdsratingsonlynarrow">
<ul id="80bNGet6b" class="TA_links mE4BAE">
<li id="u9nO7YH4pF" class="aWtKBjB9S">
<a target="_blank" href="https://www.tripadvisor.com/">
<img
src="https://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_log o_transp_340x80-18034-2.png"
alt="TripAdvisor"
/>
</a>
</li>
</ul>
</div>
</Layout>
I expect the full tripadvisor widget to load, but instead it just loads the Tripadvisor logo image (which does not require the script to be run).
The widget looks fine when I test it in a plain html document, but I can't get it to work in React. Any help much appreciated!
Thanks for the question. Receiving errors in the console (by right clicking and choosing inspect in Chrome) would be helpful to determine the root of the problem.
I think what's happening here is a conflict associated with the security of the site.
In the line that identifies the jscashe.com URL, use this URL instead: https://www.tripadvisor.com/WidgetEmbed-cdsratingsonlynarrow?amp;locationId=17821239&border=true&uniq=350&lang=en_US&display_version=2
It turns out that by doing a gatsby build && gatsby serve the widget works fine. I was previously running gatsby develop and it wasn't working then. If anyone knows why that could be I would be interested to know!