I deployed by first react app on github pages but everything is blank except the navigation bar. However, after clicking on the navigation bar everything seems to work fine.
I also I have a path to my home page so I was wondering what's wrong. Thanks!
Try adding basename={process.env.PUBLIC_URL} to your Router component. Like this:
<BrowserRouter basename={process.env.PUBLIC_URL}>
<App />
</BrowserRouter>
This tells react router to use the full URL of your repo as the '/' of your Routes. I had the same problem you're having, and this solved it.
Related
App works fine on local machine (says everyone), but the deployment doesn't work at all. I can NOT seem to figure out the problem. Any suggestions? I'll link the source and deployment below:
Demo: https://ploymahloy.github.io/ecommerce-material-ui/
Source: https://github.com/ploymahloy/ecommerce-material-ui
GitHub Pages does not support browser history like your browser does. In your case, the route https://ploymahloy.github.io/ecommerce-material-ui/ doesn't help GitHub Pages understand where to point the user (since it is a frontend route).
Solution 1
You need to use a Hash Router instead of a Browser Router in your application. This type of router uses the hash portion of the URL to keep the UI in sync with the URL.
// index.js
ReactDOM.render(
<React.StrictMode>
<HashRouter>
<App />
</HashRouter>
</React.StrictMode>,
document.getElementById('root')
);
Solution 2
You can use a trick to teach GitHub Pages to handle 404s by redirecting to your index.html page with a custom redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html.
You can read more about both approaches here: https://create-react-app.dev/docs/deployment/#github-pages
I have hosted my portfolio(multi page react app with routing) on github pages. It lets me navigate to another page by clicking the navigation links (my portfolio) but if I refresh that page its showing the following error. I am using BrowserRouter to navigate through the nav links.
I have found this solution of using HashRouter and tried this. But still the same error. I am at a loss at this moment. Please help
Generally when a page doesn't reflect the expected changes to me, it's because it's loading the cached version. Try doing a hard refresh with ctrl + shift + R and see if it solves the problem.
This is occurs, because your React app can load only as index.html, and all your routes doesn't have really html files for loading.
Read this answer, from Dan Abramov
<BrowserRouter basename={process.env.PUBLIC_URL}>
{/* routes */}
</BrowserRouter>
or
<BrowserRouter path={process.env.PUBLIC_URL + '/'}>
{/* routes */}
</BrowserRouter>
I tried to deploy my react app which was created using create react app to,
1.nginx
2.github pages
In both instances, only the react app logo and the title is visible in the tab but nothing appears in the body of the page. (The page is blank even though the code is deployed)
Does anyone know why this happens?
This is caused if you have used the Browser Router in your react project.
Both GitHub Pages and nginx serve your app from a non-root folder (i.e. username.github.io/repo-name/) as opposed to from a root folder (i.e. username.github.io/). React Router does not consider your app's URL as a match for any of the routes defined in your app.
For example, if you define a route using <Route exact path="/" component={SomeComponent} />, React Router will see that / and /repo-name/ do not match exactly and will, thus, not render the component.
To overcome this error use base name prop in the BrowserRouter and name it according to the non-root folder name.
example:- if your app is served inside a folder named "folder1" in your server, do as follows.
Hope my answer helps someone struggling with the same issue.cheers! #iii #R2B
I created a ReactJs application and what to be accessible only in domain.com/app.
I added this to index.js
<BrowserRouter basename='/app/'>
<App />
</BrowserRouter>
And now when I navigate between pages it works as it should (it adds /app/ properly), ex. domain.com/app/about.
But the application is still being accessible without /app, ex. when I type domain.com/about still shows the about page.
While I want it bo be accessible only with /app/, and not without it.
it seems that you have accidently added a trailing slash, which is not required.
see https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string for more details.
I builded a little questionnaire with React and React-router v4.
I developed with create-react-app.
It is working fine when I build it as standalone page. The Router routes like I want.
But now I made a build for a page in Mahara (https://mahara.org/) and another one for Wordpress.
In Mahara it is a plugin and the questionnaire comes in a part of the Mahara page.
In Wordpress the questionnaire is a part of the whole Wordpress Page.
In both variants the router doesn't work. The path "/" is not found. So the default "not found" page appears.
I edited the homepage property in the package.json and the basename attribute for the BrowserRouter.
Is it generally possible to make the router functioning, when the React app is not a standalone page?
Maybe the problem is, that in both platforms(Mahara/Wordpress) the url is not really the one where the questionnaire exists?
In mahara for example the questionnaire exists in "http://mahara_17_10.local/blocktype/learningstyle/js/build/" but the url shows: "http://mahara_17_10.local/view/view.php?id=3842". This public page is generated with Smarty templating and some php.
I tried both: The real place, where the React build folder exists, or the generated url (the second one). But I had no luck so far.
here some code:
package.json:
"homepage": "http://mahara_17_10.local/view/view.php?id=3842",
BrowserRouter:
<BrowserRouter basename="/view/view.php?id=3842">
Router in Main Component:
<div className={ApplicationClassNames}>
<ApplicationHeader
title={title}
count_blocks={count_blocks}
number_of_blocks_overall={number_of_blocks_overall}
/>
<Switch>
<Route exact path='/' render={() => (
<ApplicationBody
page_now={page_now}
count_cats={count_cats}
count_pages={count_pages}
categories_pages_quantity={categories_pages_quantity}
catValuesCountAll={catValuesCountAll}
language={language}
show_result={false}
values_not_for_categories={values_not_for_categories}
/>
)}/>
<Route path='/wtf' component={Result} />
<Route><div>Not found</div></Route>
</Switch>
</div>
So my questions are:
1: Is it generally possible to make the router functioning, when the React app is not a standalone page?
If yes, how for excample in wordpress or mahara. Maybe anybody knows a tutorial oder something else what can help me here.
I would be very happy, if somebody could help me here a little bit.
thanx =)
# Learner
If you have a Moodle Plugin (as a react application) on a public page for example, and the url is : moodlepage.de/mod/learningstyle/view.php?id=27
you can put an .htaccess file in the root folder of moodle with the following content:
Options -MultiViews
RewriteEngine On
RewriteRule ^mod/learningstyle/view.php/(.*)$ /mod/learningstyle/view.php?id=27 [QSA,L]
This tells the webserver to look at /mod/learningstyle/view.php?id=27 when you type mod/learningstyle/view.php/green for eyample. So the page is called and react has its url with the paramters.
This is the minimal configuration of the htaccess. You can put there rewrite conditions and some other stuff. But this works.
The (.*)$ is for the router paramters. They work too.
Make sure you have Allowoverride All in your virtual host or whereever you have your settings for the webserver.
This works fine in moodle and mahara. Worpress has its own htaccess with some rewriterules, so it didnt work for me. See here:
React Router v4 and htaccess with wordpress