I'm pretty new to Gatsby/React and web development in general, so this may be a very simple fix, but I can't figure out what the problem could be.
I'm currently working on my header and making links to each of the pages on my website and am having some trouble with the "activeStyle" attribute. So before describing specifics here is a simplified version of what I am trying to do:
<Link to="/" activeStyle={{color: 'gold'}}>Home</Link>
When I place this link on a page other than home it will still highlight the link gold even though it isn't actually the active page. However, if I use the same exact code but instead link to the /about page, it will work correctly and the link will only be gold if I am on the about page. Am I missing something?
I attempted to set the link to="/index", but Gatsby through an error at me saying that "/index" does not exist and gave a list of the pages on my site, one of which was "/". I honestly can't think of what's going on with this.
Thanks!
Link doesnt have activeStyle prop. Instead of using Link you should use NavLink. It has the following props:
<NavLink>
activeClassName: string
activeStyle: object // seems you are looking for this one
exact: bool
strict: bool
isActive: func
location: object
react-router v4 doc might be useful for you
Related
With this simple anchor link & anchor target - originally defined by Tim Berners-Lee as a HTML Fragment Identifier - is there a way to stop a false JavaScript error from appearing in Aurelia?
HTML:
In Page Link
...
<a name="in-page-link">The link scrolls/jumps here</a>
JavaScript Router Error #1 (Not a real error):
Error: Route not found: /in-page-link
That's a false positive error. Of course it's not found! It's an in page link! It isn't a route! That JS "error" isn't a real error.
Is there a way to suppress that error, without having to over-engineer a JavaScript solution - to measure scroll heights & adjust the page offset - simply get around the flawed Node.js design paradigm, where routers break a basic HTML feature to create regex paths AKA: routes? Why do I need to invent a JS fix for something a framework broke? If you break it, you fix it, right?
I've tried using Aurelia's router-ignore idea, but it doesn't work for links which start with hash tags. This similar SO answer doesn't work (& the 2nd line of the OP question was incorrect): How do I keep on the same page by clicking on internal anchor links, using Aurelia?
Is there a router configuration BYPASS feature, which won't try to re-route the URL to another location?
I've tried using nav: false in the router configuration, but it wants a moduleId. There isn't a moduleId for an in page link target.
With a basic router configuration JSON block like this...
{
name: 'no_redirect',
route: ['in-page-link'],
nav: false
}
... how do I stop either the first JavaScript error (up above) or this additional JavaScript error from appearing, considering in page links won't have nor need to use these: moduleId, redirect, navigation nor viewPort? It's just an in page link.
JavaScript Router Error #2:
Uncaught (in promise) Error: Invalid Route Config for "in-page-link": You must specify a "moduleId:", "redirect:", "navigationStrategy:", or "viewPorts:".
I'm trying to make this HTML link work, without having Aurelia throw false JavaScript errors into the console.log. Is there an easy way to do that?
In Page Link
...
<a name="in-page-link">The link scrolls/jumps here</a>
I figured out a solution for my problem!
I tried getting it to work with anchor links & router-ignore, but neither of those worked out for the site that I'm building. Perhaps it's using an older version of Aurelia, which doesn't have that router-ignore feature yet? Maybe. I don't know. I didn't check.
There is an open bug for my 1st JavaScript error on GitHub. It also has an interesting router configuration in it, which would address my 2nd JavaScript error.
I've discovered a faster & simpler work-around, which other Aurelia developers might like!
I reached out to Rob Eisenberg, who was kind enough to point me to his discord.aurelia.io site. While searching it, I found an interesting work-around idea! After exploring it & the related code examples, I was able to get the 1st false JavaScript error to disappear... without having to over-engineer any browser pixel measuring logic! I really didn't want to have to write any JS scrollbar math again, using clientOffset values. Here is a good example of measuring the scrollbar height.
I have repeatedly written code like that in the past, but I wanted to avoid having to reinvent that wheel... yet again! I really wanted to figure out another way to fix this basic snag, without having to write any custom scrollbar math logic because it felt like I was writing too much code to fix a bug in the underlying framework. Other frameworks, besides Aurelia also suffer from hijacking the '#' in the URL to create routes. It appears to be a recurring issue in the Node.js community.
This fast work-around for Aurelia is super small, fast & easy to implement. Perhaps someone will enjoy this!
Change <a href="#in-page-link"> to <div class="link" click.trigger="jumpDown()">.
Add a method into the behind-the-scenes matching JavaScript file, which sets a boolean:
jumpDown () {
this.linkClicked = true;
}
Change <a name="in-page-link"> to <button class="btn" focus.bind="linkClicked">.
Use CSS to style the link, plus add a cursor: pointer; property & hide any button styles, as desired.
So the final code would look like this:
HTML:
<div class="link" click.trigger="jumpDown()">In Page Link</div>
...
<button class="btn" focus.bind="linkClicked">The link scrolls/jumps here</button>
JavaScript:
jumpDown () {
this.linkClicked = true;
}
CSS:
.btn {
/* Style as desired. */
}
.link {
color: #0000FF;
cursor: pointer;
text-decoration: underline;
}
Then the original JavaScript error #1 vanishes! The link click still works! No additional router configuration is needed! Web developers look like web rockstars! The quality assurance team is happy! Problem solved!
So, I have this Angular code base where both ./assets/... and /assets/.... paths are used interchangeably in HTML (<img src='...'>) and CSS (background: url(...)) files.
The issue is, after exporting the app with --base-href=http://localhost/path/, some resources (images) resolve with http://localhost/path/assets/... while the other resolve with http://localhost/assets/... (resolving to the top directory on the server). I am unable to pin-point this behaviour.
I can surely put a dot in front of the resources with the pattern /assets/..., but how come they are working fine in the first place i.e. resolving correctly to http://localhost/path/assets/...? The behaviour is ambiguous. Any ideas?
i gonna explain it, but I recommend you to take a look at the documentation of angular.io
to define the base href:
Click Here
"./assets" -> Relative URL, in angular always is the Base Href
"/assets" -> It's a absolute url Trying to get from the root of the domain
Relative -> mydomain.com/my/app/assets
Absolute -> mydomain.com/assets
I just have created primitive html page. Here it is: example
And here is its markup:
www.google.com
<br/>
http://www.google.com
As you can see it contains two links. The first one's href doesn't have 'http'-prefix and when I click this link browser redirects me to non-existing page https://fiddle.jshell.net/_display/www.google.com. The second one's href has this prefix and browser produces correct url http://www.google.com/. Is it possible to use hrefs such as www.something.com, without http(s) prefixes?
It's possible, and indeed you're doing it right now. It just doesn't do what you think it does.
Consider what the browser does when you link to this:
href="index.html"
What then would it do when you link to this?:
href="index.com"
Or this?:
href="www.html"
Or?:
href="www.index.com.html"
The browser doesn't know what you meant, it only knows what you told it. Without the prefix, it's going to follow the standard for the current HTTP address. The prefix is what tells it that it needs to start at a new root address entirely.
Note that you don't need the http: part, you can do this:
href="//www.google.com"
The browser will use whatever the current protocol is (http, https, etc.) but the // tells it that this is a new root address.
You can omit the protocol by using // in front of the path. Here is an example:
Google
By using //, you can tell the browser that this is actually a new (full) link, and not a relative one (relative to your current link).
I've created a little function in React project that could help you:
const getClickableLink = link => {
return link.startsWith("http://") || link.startsWith("https://") ?
link
: `http://${link}`;
};
And you can implement it like this:
const link = "google.com";
<a href={getClickableLink(link)}>{link}</a>
Omitting the the protocol by just using // in front of the path is a very bad idea in term of SEO.
Ok, most of the modern browsers will work fine. On the other hand, most of the robots will get in trouble scanning your site. Masjestic will not count the flow from those links. Audit tools, like SEMrush, will not be able to perform their jobs
Is it possible to make a link that would normally go to an id:
<a href="http://example.com/page#someid">
instead go to a class:
<a href="http://example.com/page.someclass">
Would the page scroll wildly up and down, trying to reach all the elements with that class, or would it just do nothing?
It would do nothing, except look for a file called "page.someclass" at the server and most probably yield a 404. Please refer to the URL spec because you're wildly confusing CSS selectors with the 'hash' part of the URL.
Why don't just try it?
JS FIDDLE DEMO
If you are using a class als anchor link, your browser tries to open it as url, like in the example named above index.content. Because he is not able to find it, you will receive an 404 not found or 403 forbidden error.
I'm currently trying to build a new website, nothing special, nice and small, but I'm stuck at the very beginning.
My problems are clean URLs and page navigation. I want to do it "the right way".
What I would like to have:
I use CodeIgniter to get clean URLs like
"www.example.com/hello/world"
jQuery helps me using ajax, so I can
.load() additional content
Now I want to use HTML5 features like pushstate to
get rid of the # in the URL
It should be possible to go back and forth without a page refresh but the page will still display the right content according to the current URL.
It should also be possible to reload a page without getting a 404 error. The site should exist thanks to CodeIgniter. (there is a controller and a view)
For example:
A very basic website. Two links, called "foo" and "bar" and a emtpy div box beneath them.
The basic URL is example.com
When you click on "foo" the URL changes to "example.com/foo" without reloading and the div box gets new content with jQuery .load(). The same goes for the other link, just of course different content and URL.
After clicking "foo" and then "bar" the back button will bring me back to "example.com/foo" with the according content. If I load this link directly or refresh the page, it will look the same. No 404 error or something.
Just think about this page and tell me how you would do this.
I would really love to have this kind of navigation and so I tried several things.
So far...
I know how to use CodeIgniter to get the URLs like this. I know how to use jQuery to load additional content and while I don't fully understand the html5 pushstate stuff, I at least got it to work somehow.
But I can't get it to work all together.
My code right now is a mess, that's the reason I don't really want to post it here. I looked at different tutorials and copy pasted some code together. Would be better to upload my CI folder I guess.
Some of the tutorials I looked at:
Dive into HTML5
HTML5 demos
Mozilla manipulating the browser history
Saner HTML5 history
Github: History.js
(max. number of links reached :/)
I think my main problem is, that everybody tries to make it compatible with all browsers and different versions, adds scripts/jQuery plugins and whatnot and I get confused by all the additional code. There is more code between my script-tags then actual html content.
Could somebody post the most basic method how to use HTML5 for my example page?
My failed attemp:
On my test page, when I go back, the URL changes, but the div box will still show the same content, not the old one. I also don't know how to change the URL in the script according to the href attribute from the link. Is there something like $(this).attr('href'), that changes according to which link I click? Right now I would have to use a script for every link, which of course is bad.
When I refresh the site, CodeIgniter kicks in and loads the view, but really only the view by itself, the one I loaded with ajax, not the whole page. But I guess that should be easy to fix with a layout and the right controller settings. Haven't paid much attention to this yet.
Thanks in advance for any help.
If you have suggestions, ideas, or simple just want to mention something, please let me know.
regards
DiLer
I've put up a successful minimal example of HTML5 history here: http://cairo140.github.com/html5-history-example/one.html
The easiest way to get into HTML5 pushstate in my opinion is to ignore the framework for a while and use the most simplistic state transition possible: a wholesale replacement of the <body> and <title> elements. Outside of those elements, the rest of the markup is probably just boilerplate, although if it varies (e.g., if you change the class on HTML in the backend), you can adapt that.
What a dynamic backend like CI does is essentially fake the existence of data at particular locations (identified by the URL) by generating it dynamically on the fly. We can abstract away from the effect of the framework by literally creating the resources and putting them in locations through which your web server (Apache, probably) will simply identify them and feed them on through. We'll have a very simple file system structure relative to the domain root:
/one.html
/two.html
/assets/application.js
Those are the only three files we're working with.
Here's the code for the two HTML files. If you're at the level when you're dealing with HTML5 features, you should be able to understand the markup, but if I didn't make something clear, just leave a comment, and I'll walk you through it:
one.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>One</title>
</head>
<body>
<div class="container">
<h1>One</h1>
Two
</div>
</body>
</html>
two.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>Two</title>
</head>
<body>
<div class="container">
<h1>Two</h1>
One
</div>
</body>
</html>
You'll notice that if you load one.html through your browser, you can click on the link to two.html, which will load and display a new page. And from two.html, you can do the same back to one.html. Cool.
Now, for the history part:
assets/application.js
$(function(){
var replacePage = function(url) {
$.ajax({
url: url,
type: 'get',
dataType: 'html',
success: function(data){
var dom = $(data);
var title = dom.filter('title').text();
var html = dom.filter('.container').html();
$('title').text(title);
$('.container').html(html);
}
});
}
$('a').live('click', function(e){
history.pushState(null, null, this.href);
replacePage(this.href);
e.preventDefault();
});
$(window).bind('popstate', function(){
replacePage(location.pathname);
});
});
How it works
I define replacePage within the jQuery ready callback to do some straightforward loading of the URL in the argument and to replace the contents of the title and .container elements with those retrieved remotely.
The live call means that any link clicked on the page will trigger the callback, and the callback pushes the state to the href in the link and calls replacePage. It also uses e.preventDefault to prevent the link from being processed the normal way.
Finally, there's a popstate event that fires when a user uses browser-based page navigation (back, forward). We bind a simple callback to that event. Of note is that I couldn't get the version on the Dive Into HTML page to work for some reason in FF for Mac. No clue why.
How to extend it
This extremely basic example can more or less be transplanted onto any site because it does a very uncreative transition: HTML replacement. I suggest you can use this as a foundation and transition into more creative transitions. One example of what you could do would be to emulate what Github does with the directory navigation in its repositories. It's an intermediate manoever that requires floats and overflow management. You could start with a simpler transition like appending the .container in the loaded page to the DOM and then animating the old container to {height: 0}.
Addressing your specific "For example"
You're on the right track for using HTML5 history, but you need to clarify your idea of exactly what /foo and /bar will contain. Basically, you're going to have three pages: /, /foo, and /bar. / will have an empty container div. /foo will be identical to / except in that container div has some foo content in it. /bar will be identical to /foo except in that the container div has some bar content in it. Now, the question comes to how you would extract the contents of the container through Javascript. Assuming that your /foo body tag looked something like this:
<body>
foo
bar
<div class="container">foo</div>
</body>
Then you would extract it from the response data through var html = $(data).filter('.container').html() and then put it back into the parent page through $('.container').html(html). You use filter instead of the much more reasonable find because from some wacky reason, jQuery's DOM parser produces a jQuery object containing every child of the head and every child of the body elements instead of just a jQuery object wrapping the html element. I don't know why.
The rest is just adapting this back into the "vanilla" version above. If you are stuck at any particular stage, let me know, and I can guide you better though it.
Code
https://github.com/cairo140/html5-history-example
Try this in your controller:
if (!$this->input->is_ajax_request())
$this->load->view('header');
$this->load->view('your_view', $data);
if (!$this->input->is_ajax_request())
$this->load->view('footer');