Hi so I'm working on a bootstrap CSS header project and I happen to have this issue on getting a link on Bootstrap header that I'm working. I used React router on this one.
If using this code snippet
<ReactBootStrap.Nav.Link> <Link to="/StoreInfo"> Store Info </Link> </ReactBootStrap.Nav.Link> I was able to access the router link that I made but then when I inspect it on chrome I'm getting this error in DOMnesting regarding a link cannot appear as a descendant of a link now i fix that by removing the link and putting it inside the bootstrap link instead as show in this code snippet <ReactBootStrap.Nav.Link to="/StoreInfo"> Store Info </ReactBootStrap.Nav.Link> but then the problem now is the link no longer working. Can anyone help me to fix this? I will appreciate it a lot and Stay Safe everyone!
It seems for the ReactBootStrap.Nav.Link-component you should use href="/StoreInfo" and not to="/StoreInfo"
See the documentation here: https://react-bootstrap.github.io/components/navs/
Related
I want to use the regular Flowbite CSS code inside my React app.
https://flowbite.com/docs/components/modal/
I added the following code inside my react file:
https://flowbite.com/docs/components/modal/#default-modal
I added the CSS in the header:
And include the following JavaScript file before the end of the body element:
When I include the mentioned code (https://flowbite.com/docs/components/modal/ ), the modal just do not work.
How come this happens, can I fix it somehow?
And also, I do not want to use the Flowbite-react library as it does not have any documentation, and also do not have a lot of templates available.
I tried to add the mentioned steps and experimented, but I did not get the modal running with react
I have created a React Application and copied navbar from bootstrap component. I also added cdn files at index.html file. Also changed changed class to className but still but when run I get error with failed to compile and cursor is placed on data-toggle="colapse". upon removing this line it moves to next one. but its not working. .
working with bootstrap in react is not simple, it is easier to use React-bootstrap.
https://react-bootstrap.github.io/
you then just download the npm package and import the buttons and other options you want.
If you want to go about doing it this way, then you would need to use <button className="bootstrapclass">hello</button>
or specifically
<button className="btn btn-secondary">hello</button>
outside of that, there is no way to use bootstrap.
it is advisable that you share your code, so people can see what the mistake is.
The error was because of attaching cdn at outside the body. I resolved this by placing cdn of CSS and JS at just before the closing body tag.
I'm probably missing something really obvious but I'm not very accustomed to GitHub or React so I'd love some advice.
My GitHub is here:
https://github.com/SarahACollins/PortfolioWebsite
I've tried publishing the website here:
https://sarahacollins.github.io/PortfolioWebsite/
and it just produces a blank page. I've tried several different ways of fixing (changing the homepage, moving the index.html to the front, etc.) but can't figure out what's wrong. Any help would be appreciated.
In the developer console it says:
Uncaught SyntaxError: Cannot use import statement outside a module. Looking at the location of the error shows that it is node.js code.:
import React from 'react';
You need to compile your react source code and create a .js file for the client from it.
I use nextjs with JSS to styling my components. I want to be able to add react-fontawesome inside my project but I encoutered a problem to integrate the library functionnality.
I tried differents way to implement it but any of them work. Here a codesandbox with my code - https://codesandbox.io/s/v6pyxp00w0
The preview render of codesandbox seems break but all the code are on here.
When I run my code, this error message is display on client and server consoles:
Could not find icon { prefix: 'fas', iconName: 'facebook' }
Do you think I should call the library function inside my app.js file instead of my document.js? Have you an idea to fix my problem?
Thanks you very much!
I am not able to render the Angular on my webpage correctly when using Github Pages.
Problem page: http://weblue.github.io/
I thought this original to be a conflict with Jeckyll, so I changed the symbols for parsing to {( )} to avoid a conflict.
The page still only displays {(variable)}
You will notice that you links to the .js files are linked to ../TierlistTemplate/js/.. but in reality they are in /js/.. so you will have to fix that.