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
Related
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 ;)
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!
For Routing to some page on click, I can achieve it in two ways
import Router from 'next/router'
<button onClick={() => Router.push('/about')}>
<a>Go to About</a>
</button>
And
<button>
Go to About
</button>
Which one is the best practice in Nextjs?
a tag inside button is not allowed in semantic html, both of them are interactive elements.
For links, Next provides Link component that accepts a tag as a child.
For buttons, use <button onClick={() => Router.push('/about')}>text</button> without a.
The best way to create links between pages is to use your nextjs package.
import Link from "next/link";
Then use it like that
<Link href={'/'} params={'id': 1}>
<a>link</a>
</.Link>
if useing node js router href linked by name route
For the best user experience I would suggest a third option / best practice:
import Link from "next/link";
<Link href={"/within/your/page"} passHref>
<button>go</button> // or any other element
</Link>
pre NextJS 10 if your path had dynamic segments you would need to pass "as" also like:
import Link from "next/link";
<Link href={"/review/[id]"} as={"/review/12"} passHref>
<button>go</button> // or any other element
</Link>
The Link Component / the router.push enables client side navigation. This makes navigating your website a lot faster.
you can read more on this here:
https://nextjs.org/docs/api-reference/next/link
https://nextjs.org/docs/api-reference/next/router
I am trying to navigate to a new page(i.e when i click on a button it should open a new page, within the app)
This is first page
<dom-module id="project-view">
<template>
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route
route="{{route}}"
pattern="/:name"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<iron-selector selected="[[routeData.name]]" attr-for-selected="data-page">
<a class="btn" data-page="Project" href="#/Project">Go to create project</a>
</iron-selector>
<iron-pages selected="[[routeData.name]]" attr-for-selected="name">
<create-project name="Project" route="{{subroute}}"></create-project>
</iron-pages>
</main>
</div>
<div>
</div>
</template>
<script>
Polymer({
is: 'project-view',
});
</script>
</dom-module>
so now when I click on the button "Go to create project", the create project is opening in the same page, instead of going to a new page.
the Url changes to /#/Project but it opens the create-project page just beneath the current page
where create-project is just a simple html form page.
I want to open the create project such that only create-project content appears on the page and not the fusion of previous page content with create-project page
Can I navigate to create-project ?
Is there anything I am missing, or is it even possible
Polymer's app-route is designed this way, to work with a "single page app" or SPA. You can create a link or button to show a completely separate page if you like, without the hash. /my-separate-page. But you'll lose everything from memory in your original Polymer based app.
I am building an Angular app and hitting a bit of a snag in how to handle the home page. The home page is 90% different - only the header stays the same - in there I have directives that show user login state for ex.
To make use of routing/templates etc I'd ideally like to have my ngview in the white area of sample shown - that all works fine - just not sure how to build the home page. It doesn't need an ngview area persay since it's the only one of it's kind. I don't want to make it as a second apps however as that seems wasteful and would reload everything.
Googling this brings up suggestions of replacing the white area with a directive but then I think I would lose the whole routing/template benefit.
Alternatives I have seen have code to determine if on home and load a body CSS class etc but that is not ideal either as the content is so different.
UI Router is a possibility but I'd like to avoid prebeta stuff if possible.
Suggestions?
You could have this:
index.html:
<body>
...header..
<div ng-if="isHomePage()">
<div ui-view></div>
</div>
<div ng-if="!isHomePage()">
<div ng-include="'shell.html'"></div>
</div>
...footer..
</body>
home.html (with route '/')
...your home page html...
shell.html (any route different than '/')
<div>
<div>
<div ui-view></div>
</div>
<aside><aside>
</div>
finally, add isHomePage() to your root scope
$rootScope.isHomePage = function() {
return $location.path() == '/';
};