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
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 built an app that doesnt have a server. It just pulls data from a couple of endpoints.
When someone tries to access a page that isnt the root URL they receive a Page not found message.
I havent managed to find a solution to this that doesnt involve writing a server. Im really hoping that I can avoid that because the app really is too simple to need it.
When I navigate to http://url.com/nextPage it returns a Page not found, but if I navigate there from the root http://url.com/ I dont have any issues.
I have not pushed an app to production before so this was an unexpected issue, but it is also important to how the app works that users are able to access a page directly via the URL.
My App.tsx file. Both pages are just straight forward React.
import { BrowserRouter as Router, Route } from 'react-router-dom';
function App() {
return (
<Router>
<Route
path='/'
exact
component={HomePage}
/>
<Route
path='/nextPage'
component={NextPage}
/>
</Router>
)
}
Since now I know you are using Netlify as your hosting provider, there is a way to do it without having your own server. Netlify has lots of configuration, one of it being redirects.
You could try adding to your Netlify.toml the following:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Or, you could create a _redirects file, with the following content:
/* /index.html
Take a look at this documentation: https://www.netlify.com/blog/2019/01/16/redirect-rules-for-all-how-to-configure-redirects-for-your-static-site/
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 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 am new here and I have a question about React JS. I used the create-react-app tool to initialize my application. I wanted to ask how can I change the initial landing page when I start the application.
For example when i am executing 'npm start' it will go to open a new tab in the browser with url 'localhost:3000'. Now I want when I execute this command to open at localhost:3000/api.
Thank you for your time
Nick
You should be using react router, then you'll be able to redirect the root path to where you want:
<Redirect from='/' to='/api' />
Or, if you want the sub-path without redirection, you can use basename like:
<Router basename={'/api'}>
<Route path="/" component={Api} />
</Router
Now, when you start the project, it will serve from your_domain:port/api
If you don't use react router, then you may set homepage in package.json like:
"homepage": "/api"
You can edit the homepage in package.json
"homepage": "https://your website url/route of what you want start with",
for example:
"homepage": "https://icecreamzhao.github.io/api",
When you start the react application, you'll find that the app runs by opening the url http://localhost:3000/api as you expect.
Refer React docs for more info
If you are using React routing you can add using the prop basename
<Router basename={'api'}>
Or if you want to change the default loading port you'll need to modify the core file which is not recommended
node_modules/react-scripts/scripts/statr.js
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
Thanks
I',m assuming you are using React Router version 6.
From app level you could use the basename property in BrowserRouter and configure all sub routes from there. i.e.: <BrowserRouter basename="/api"> and also add the property in package.json to "http://localhost:3000/api"to make react starts from that route in localhost.
In case you have an application configured at root path / and also the api under /api you could use just the property homepage in package.json. This is also valid for React router v5
setting
"Homepage" : "/home"
in package.json worked for me.
now it opens to /home when i 'npm start'