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>
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 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.
I have a nested structure where i host the react build as follows level1/level2/level3. When i hit the static hosted build using serve with localhost:3000/level1/level2/level3 it redirects correctly to localhost:3000/level1/level2/level3/title/cat/id. But when i try to hit
localhost:3000/level1/level2/level3/title1/cat1/id1 directly it just returns Not found.
I have the browser router code as follows
<BrowserRouter>
<Switch>
<Route path="/level1/level2/level3/:pageTitle/:category/:id" render={AppBody}/>
<Redirect from="/level1/level2/level3/" to="/level1/level2/level3/title/cat/id"/>
</Switch>
</BrowserRouter>
Why does default redirect work but not when we try to hit the url directly?What's the correct way to fix this?
This works just fine for me, so I think there is some other aspect of your code that is causing a problem.
Here's a code sandbox with a simple index.js that includes your router code:
https://codesandbox.io/s/vmyzkj1lvy
You can use this URL to see the results for the particular URL you mentioned:
https://vmyzkj1lvy.codesandbox.io/level1/level2/level3/title1/cat1/id1
The problem could not be actually the react router but instead your server. So first check that your server is actually returning a response when visiting /level1/level2/level3/title1/cat1/id1.
Your react router is actually changing the url in the browser when it hits <Redirect from="/level1/level2/level3/" to="/level1/level2/level3/title/cat/id"/> without sending a request to the server.
You can use this python gist as a server for static serving for your react app that I believe would solve your problem ;)
I have a website made with React running on Digital Ocean with pm2 and NGINX. The entry point "/" loads just fine but when I try to go to the "/:username" route I just get 404 Not Found. My routes are defined in App.jsx as follows:
<Switch>
<Route
exact path='/'
render={
routeProps => <Front {...routeProps} />
}
/>
<Route
path='/:username'
render={
routeProps => <Profile handleSignOut={ this.handleSignOut } {...routeProps} />
}
/>
</Switch>
index.js has the following code:
ReactDOM.render(<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
)
The routes all work as expected when running locally with npm run start.
This is a very common problem for single page apps written in different frameworks like React or Angular.
The problem, though, is irrelevant to the frameworks. It rather lies in the mechanism that is the in-browser routing. It is actually not a real routing. When you open a single page app, a simple index.html file is served, and when you navigate away inside the app, the framework takes care of rendering a new page and faking a navigation event (so that it will be recorded in the browser history and the url is changed).
But when you arrive on a subadress, like 'myapp.com/some-page', this will mke the server try and serve an actual directory called 'myapp.com/some-page', not your index.html file, which you obviously need to run the app, and, as this directory does not exist, it will throw a 404 error.
To fix this, you need to reconfigure your server, so that in case of a 404 error, instead of failing, it returns your index.html file; this way your code will be loaded and the underlying framework will handle the routing to display the correct page.
For react App hosted on app Platform on Digital Ocean.
Luckily now, you can now enable it through the UI. Please follow the steps below and it should be resolved.
Using Cloud panel UI: Log in and click on App > Settings >> click on component name > scroll down to Custom page > Edit Custom page and select Catchall > Enter index.html in the page name block > Save
Cheers,Arinze Hills
In addition to #amem nice explanation, add the following line to your web server configuration file:
For NGINX add error_page 404 /index.html;
For Apache add ErrorDocument 404 /index.html to your .htaccess
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