I am experimenting with React Router and have some styling and syntatic issue regarding links(or you might say the defaul <Link> components). As it turns out, under the hood, those are just regular anchor HTML elements, which are also with default display “inline”. This behavior does interfere with playing with their positioning, so one way i go on in handling them is change their display property to “inline-block”(to control their size), or even “block”. But there is also another, semantic issue, as HTML suggests we are not to place div's inide anchor tags and one of my links is actually a logo image.
My question is, if anyone has worked with React Router and styled links in different scenarios(or has an insight on the matter), how did you, or would you approach the matter. Would you change the anchor display behavior, would you put inside some span to work as an additional styling feature or image, or would you wrap the anchor itself in a div container, to use as image background, or is it even possible to change the router link to a different HTML element?
i am adding attributes to my links and style them with CSS, but anchor comes with a range of disadvantages when you wanna make a logo image out of it
right now im investigating this option, and i tried to pass a regular div instead of an anchor, but it not longer can serve as link…maybe im not making it right 
. In the example they do pass an anchor as a component, which does not serve me any better than the default Link
There is nothing about an a element that can’t be styled just like all other element types. You can use them as containers as long as you change the default styles to fit your needs.
and thats what i did, but then there is also this statement:
Why do you need a div?
Lets assume my logo must have its logo image set as background, but i also want there to be a padding between the image and the supposed link borders. The best approach i see, would be to set the image as background to a regular div and then nest it inside the anchor element and either set margin for the div, or padding for the anchor, which will effectively set a space surrounding the image. This apparently is conflicting with proper HMTL semantics, as ill have to nest div inside <a>. To avoid that, instead i am wrapping a div around the anchor and put the image background to the anchor(the link), but there is a small issue, where if a user clicks on the div(but not on the anchor), he wont be redirected, yet the div(according to my design) should be part of the redirecting action(and if i must set it work, ill need to create a whole handler for the div on click etc…). Like they say, devil is in the details
Putting aside any reasons for/agains how you’re structuring your HTML:
You can wrap anything in an anchor apart from another anchor or an interactive control (that wouldn’t make sense anyway). That’s what they’re explicitly designed for in HTML, because otherwise you couldn’t make anything you wanted linkable.
In XHTML it’s against the spec, but XHTML isn’t something that’s used nowadays (the solution would have been to use the next version of XHTML’s ability to add a src to any element. But the next version of XHTML never got off the drawing board, you can’t do that, we have HTML where the solution is to wrap whatever you want in an anchor tag)
I’m not really sure if your question as anything to do with React Router.
The SO thread is about using a nested block-level element instead of just styling the a element as such. Which there isn’t a good reason for. Having a div inside an a element is valid HTML but it shouldn’t be used instead of styling the a element.
Why do you need the logo to be a background image?
I’m pretty sure I would need to see an example because I’m not sure I understand what it is you are trying to do. You seem to be saying that you want padding between the image and its container (the border) but the image is on the container so you need another element?
The question is rather general, how to handle/style React Router Links, if there are some better practices and especially in the specific case if we are to create a logo out of it. Ofc, one could handle the problem entirely with pure css and not use any ofthe RR features, but i assumed React would have presented a comfortable tool on their own(as they do with every other thing).
Im forced to use the logo image as a background image to a div because im unable to load the svg file inside img or any suitable html element(the only other option that workedfor me was to put the entire svg code inside the html file itself, which is obivously rather unpractical). I already had a topic regarding how to use a svg file as an image and yet i was not able to solve this issue.
Sorry for giving you the trouble of making a code snippet, i should have provided one of my own. I use the property background-size: contain so the image scales with the size of the div, as i resize the logo under certain conditions. Anyway, your code actually gave me two possible ways to not use an extra div container and set a space between it and the image. I was not aware and did not use background-clip: content-box, so setting padding on the image element, did not create visible padding, but rather increased size of the image. Also, i noticed, even if i dont use background-clip, i could use the image element border as effective padding, so you made my life easier even without realizing it^^
this is example of the desired effect i wanted, inspired by your code:
Why i insisted so much on padding, is to produce the hover effect, as i saw myself short on other ideas how to do it, as its not a regular link with text, where i can apply styling to the text and other options could be too much hassle to apply
This is normally what is done because it’s more practical for a number of reasons:
- because it’s treated exactly the same as any other HTML, thus allowing for any styling/interaction to be applied directly to it and
- it’s React, so the SVG can be defined as a React component with access to all the functionality React provides for any other component and
- it’s very easy to convert say a folder of SVG images to React components using a build tooling plugin
Using SVGs as static images is easier in a few respects but the tradeoffs vs. the above are normally weighted pretty heavily in favour of inline SVG.
actually neither backgroung-clip nore setting a border worked as intended when i tried to apply in my project. For some reason, however i play with the background properties(and other properties), my image has parts cut, or becomes too big and never quite the effect of regular padding id expect.
I overlooked the fact, the logo is a text set on transparent background and i use that second container div to set its background to different color, when the image is hovered. So im again sticking with using a second div.
i struggled to load the svg images into JS files/as react components so i scrapped the idea. The only two ways that were working for me was directly paste the svg code into the index.html file, or use the svg file as background image, so i stayed with the later
Did you do as the CRA docs shows it? It should work just fine. Just note that ./ is the src folder, not the root folder.
So with an img folder inside the src folder, it would be.
import logo from "./img/logo.svg";
Or as a component
import { ReactComponent as Logo } from "./img/logo.svg";
yes, it did work, i converted several icons from css background images, to images i imported directly in JS; I had to review lot of styling in my project. Ill leave the logo link for tomorrow 
PS: as the logo is an <img>, i placed it directly inside the Router Link without remorse
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.