This is my first attempt at creating a navbar using REACT. Although webpack compiled successfully, nothing shows in my browser.
Can I have some help please? This is the github repo for the project:
https://github.com/mah752/myportfolio
thank you,
Maryan
So this looks like it's something to do with the way you have implemented your routes. If you were too boot up your app and check the console you would see.
router.ts:5 Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.
I have looked through your code and noticed that you have the routes in your nav bar as well as index.js so you're inserting <Router> inside another <Router> which breaking things. As <App /> has your navbar which has the <Router> component also.
I would highly suggest going through this tutorial on React Router
https://reactrouter.com/docs/en/v6/getting-started/tutorial
This will tell you how to implement your routers correctly and go over nested routes.
Also another tip. I noticed you have a lot of files in your components folder for example:
Project.js
Project.css
The best practice is to do create a directory for each component and create a css module file like so:
components/projects/... This would now look like
Project.module.css
Project.js
But going back to your issue, go through the link on React Router and you should be fine.
I've cloned your repo and I see the following error in the browser:
Module not found: Error: Can't resolve './app.css' in '/home/atota/development/myportfolio/src'
Open src/App.js and on line 10, you're doing the following import:
import "./app.css";
Whereas it should be:
import "./App.css";
Spoiler alert: after resolving this error, you'll see the following one in the Browser Dev Tools, related to your component:
Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.
I see you're using react-router-dom, I suggest you to take a look at the docs.
Related
I have a React project which consists of many pages.
One page contains an iframe that must load a local HTML file. Instead of that, it loads index.html file (homepage).
I am using "react-router-dom" for route and links.
I think the problem is with redirecting the link of the HTML file to the homepage file.
If this is the problem, how I can disable redirecting to the homepage when calling the desired HTML file?
Edit:
The HTML file is a part of a third-party SDK bundle and can't be converted to a react component.
If the file is a third party library
Consider putting it in the public directory and using PUBLIC_URL to access the file.
<iframe src=`${process.env.PUBLIC_URL}/bundle/test.htm` ... />
If you need to load another component
Load the component that renders the page directly instead of doing an iframe. That way you are not constrained to path based rules.
If you want path based rules
Consider adding a nested route:
https://v5.reactrouter.com/web/example/nesting
Or v6 route: https://reactrouter.com/docs/en/v6/getting-started/overview#nested-routes
Prefer not to intentionally break react-router but work within its constraints.
I would recommend putting an absolute path if it was an external route; however, since it is an internal link it will still conform to react router. Or use public folder.
See in react app you can only route components.
For example, in the app.js of your react application you do
App.js
import { BrowserRouter, Routes, Route, } from 'react-router-dom'
function App(){
return(
<BrowserRouter>
<Routes>
<Route exact path='/' element={<Your_component />} />
</Routes>
</BrowserRouter>
)
}
The Problem
In the react you can route through the components according to me. If you try to route another file by writing the URL = 'localhost:3000/another-html-file.html'. It tries to find the URL inside the app.js routes but it is unable to find it and you see it can't find it hence, it always returns the homepage so you only can see the index.html(homepage).
The solution
If you want to route in another HTML file.
1 - Try to build it as a component so it will be easy for the react app to route in it.
2 - Try to set up another route system only for HTML files which might be difficult because your react app always works from the src file containing all the files as JS extensions.
I prefer the first one.
Hope it might help.
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'm adding React modules dynamically using System JS, and it works great!
Except if I try to use the react-router context from the loaded module.
"react-router-dom": "6.0.0-beta.0"
You can see in the react component explorer that there is definitely a <Router> component as an ancestor.
The routing works fine in the host application - it only breaks when called from a dynamically loaded component.
I'm a novice with React, so I could be making a wrong assumption of how the contexts are provided to deeply nested or dynamically loaded children.
Router is mounted here -
https://github.com/savantly-net/sprout-platform/blob/47cb99f7076bf6df09d9fec8e2d6c7ee78ce08af/frontend/apps/webapp/src/index.tsx#L204
Module is being loaded here -
https://github.com/savantly-net/sprout-platform/blob/47cb99f7076bf6df09d9fec8e2d6c7ee78ce08af/frontend/apps/webapp/src/features/plugins/AppRootPage.tsx#L84
The module element that throws the exception is here -
https://github.com/savantly-net/sprout-platform/blob/47cb99f7076bf6df09d9fec8e2d6c7ee78ce08af/backend/modules/forms/src/plugin/FormsRootPage.tsx#L47
The problem was due to having the react-router-dom lib in the module bundle.
When the dynamic module loaded, it was using it's own version of the lib, rather then the one provided by the host application.
I added this to the externals in my webpack/rollup config, and the problem was solved.
I can now have children routes managed by a plugin inside a host application! =].
Webpack -
https://github.com/savantly-net/sprout-platform/blob/e746085ebd65820fd449c968385913f2cc86ee0d/frontend/tools/sprout-toolkit/src/config/webpack.plugin.config.ts#L176
Wrapping <App /> inside <Router> </Router> will resolve the issue.
import { BrowserRouter as Router } from "react-router-dom";
<Router>
<App/>
</Router>
my company wants to create a react component which is going to render a google maps frame, a search field and a result list. Basically to search, see results and see them on the map.
Today the component is created but we're using a lot different libs like react-router, react-redux, axios, etc.
We want to find out a way to embed our component to another websites in a simple way without using iframes(if possible). Ideally a solution where we could just ask for our clients to add a div with a specific id and our script tab.
Any ideas how to solve it?
Thank so much.
In this situation, I'd suggest having Webpack bundle your component with whatever dependencies you need into a standalone js file. Then rather than using a typical app.js or index.js file that attaches an app to a body or div tag like create-react-app does, specifically use ReactDOM to render your component to a specific div based on ID. That way they just include your file and make sure they have the div with the ID and it'll take care of the rest. I've done something similar at a couple different jobs.
import ReactDOM from 'react-dom';
import MyComponent from 'my-component.js';
ReactDOM.render(<MyComponent />, '#my-div');
Besides that it's just tinkering with Webpack.
The consumer needs to tag an HTML element with an identifier in this case a class name representing a certain type of widget.
<div class="ray_widget"></div>
Then in the root of our react application src/index.tsx or jsx
We find all elements that are tagged and render react applications on it.
const WidgetDivs = document.querySelectorAll('.ray_widget')
WidgetDivs.forEach(divElement => {
const root = ReactDOM.createRoot(divElement);
root.render(
<React.StrictMode>
<Widget divElement={divElement} />
</React.StrictMode>
);
})
You then bundle your application and the customer needs to include the script on their website
<script src="https://your-react-app-bundle-cdn/index.js" type="text/javascript"></script>
Resource:
Embed React application without an iframe full post
I'm trying to make a react project on github pages using [username].github.io. but when I go on the link, it just returns a white screen without any error messages. This also happens when I use a custom domain name.
However, it works when I run it locally and also when I use gh-pages instead of a user repo.
I used https://medium.freecodecamp.org/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089 to upload all my files into github since I created the repo at the end after I finished, but I tweaked it a little to work without gh-pages.
I also referred to this answer: hosting gh-pages on custom domain, white empty page but it didn't do anything for me.
Does anyone know how to fix this? Thanks!
Change BrowserRouter to HashRouter as follow
Before:
import { BrowserRouter } from "react-router-dom"
ReactDOM.render(
<BrowserRouter><App /></BrowserRouter>,
document.getElementById('root')
);
After:
import { HashRouter } from "react-router-dom"
ReactDOM.render(
<HashRouter><App /></HashRouter>,
document.getElementById('root')
);
Check if you're getting an error on the console. You might need to switch from BroswerRouter to HashRouter, because gh-pages doesn't work well with the former.
I am a bit late to this discussion, but I ran into this same issue and I found a solution that was not listed here.
Here is the solution I found: https://github.com/gitname/react-gh-pages/issues/3#issuecomment-399787987
The issue this user was having was related to how GitHub serves your react build from GitHub Pages. GitHub pages serves your react build from a folder names after your repository directory instead of from the root server directory "/". Hopefully this link will help someone else out in the future.
Using react router in my create-react-app i had this same issue. What solved it for me was adding this line to the router.
<Router basename={process.env.PUBLIC_URL}>