score:0
Answers to this and similar questions seem to neglect that, if using client-side routing (like React Router) there are some back-end changes that should be made when serving from a subdirectory.
There are several approaches to this. One is to use <HashRouter>
; that approach is described well here, or in the React Router docs.
Another approach is to use <BrowserRouter>
with Express. Here are the steps for that:
In your app:
<BrowserRouter basename={process.env.PUBLIC_URL}>
<Route path="/your_route">
...
</Route>
<Route exact path="/">
...
</Route>
</BrowserRouter>
Then, in package.json
, add:
homepage: "https://example.com/mySubdirectory"
(Note that "." will not work, if you're using client-side routing.)
Then, in Express, try the connect-history-api-fallback
package (which is recommended in the Vue Router docs).
const express = require('express');
const historyFallback = require('connect-history-api-fallback');
const app = express();
app.use(historyFallback);
Without this, users will not be able to directly enter https://example.com/mySubdirectory/my_route
in the browser's url bar; they'll get a cannot GET
error.
You can see an example of the above with Apache here.
score:1
in package.json
"homepage": ".",
score:1
If you are using react-router-dom, If you know your directory name you could set basename to "/directory-name" in the router
or
If you want to set the base name to be dynamic, use
(Note: This won't be useful if you are using sub routing)
or
Incase of sub routing, set a standard string to your routes
Example:
let basename_path = null;
var url = window.location.pathname.toLowerCase();
if(url.indexOf("react") === -1){ // If string(react) not available
basename_path = "/";
}
else{
var array = url.split("react");
basename_path = array[0]+"react/";
}
<Router basename={basename_path}>
<Route exact path="/react/home" component={home}/>
<Route exact path="/react/contactus" component={contactus}/>
<Route exact path="/react/aboutus" component={aboutus}/>
</Router>
Source: stackoverflow.com
Related Query
- How to bundle a React app to work in ANY subdirectory on a server?
- How to bundle a React app to a subdirectory on a server?
- How do I configure my Nginx server to work with a React app in a subfolder?
- How to deploy a React App on Apache web server
- how to share environment variables between react app and express js server hosting it as static site
- How to bundle react app with rollup
- How can I start my node server and react app at the same time?
- How to deploy React App on production with Server Side Rendering
- How we can convert client side rendering react js app to server side rendering using react router 4?
- React/webpack - How can I host react app on one server and images/fonts on another server?
- How to inject data from the server in index.html in an ASP.NET Core 3 React app
- How to Properly Configure Apache on a SPA React App that Resides on a Subdirectory that uses Nested URLs built from React Router?
- How to add build react app (js,css) in to the laravel back end server
- How to pass config variables from server (Express) to React App
- How to create childElement from server response in a react app
- How to deploy react app in ubuntu server with bitbucket pipeline
- How to deploy a react app that does not have index.html on an apache server for production
- How to get my withStyles classes to work in my export class component in my React app
- React Server Side Rendering App - how to update meta data
- How to make regular javascript work in a react app
- How should a React app (or any SPA) interact with a HATEOAS back-end?
- How to persist data in react app to minimize server call
- How to make the filters work in this todo app created using react and redux?
- How can I setup my react app in ubuntu server
- How to deploy and host react app on Apache server
- How does "import" statement will work in server side rendering using react js?
- ReactJS: how to add a functionality to any React Component by default in my app
- How to fetch data from server using JavaScript? (adding backend to React app for the first time)
- How to make vantajs wave work with react app
- React Router. How to prevent crashing whole app when have any error on of the container(page)
More Query from same tag
- Formik - Trigger validation from very first keypress
- How to add environment variables to AWS amplify?
- How do I initialize constructor and state in a Gatsby arrow function component?
- redirect external link reactjs
- DOM created dynamically not showing up in Component
- Finishing AWS authentication flow
- ReactJS responsive layout unresponsive for first grid
- React.PureComponent not implementing shouldComponentUpdate
- How to pass object with known fields as props in react
- Why my function in componentDidMount is being called rapidly?
- react-google-maps: How can I dynamically style the Google container (.pac-container) of multiple StandaloneSearchBox components?
- How can I know redux-form resetForm() is completed?
- Making a grid system of images and text mobile responsive
- ReactJS and Node -- Error 400 bad request
- Calling action inside function inside componentWillMount causing Cannot read property of undefined
- How do I set the response header from a server using an apollo server?
- How to return an event from Button using react-bootstrap?
- Toggle a class only to one element at each click of the mouse - React hooks
- Why React JS function not executing synchronously?
- How to use Redux to refresh JWT token?
- D3.js: xScale returns me undefined
- How can I get Promise return object from asynchronous function in another module
- Can't get proper location state in React Router if location is added in Routes component
- Why is my state empty when updating on socket event?
- react app doesn't update and .env file doesn't work
- Trying to get a React controlled input to have a default value
- Add Babel to Typescript React app
- Fetching data in react
- TypeScript error: Cannot find module 'moment'
- React hook form: How to can I use onChange on React Hook Form Version 7.0