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
- Reading JSON data with axios and React
- How to remove whitespace from outside of container
- ReactJS assign click handler in for loop
- return a variable or constant in a function in an ES6 react class
- React use img onerror
- ReactJS: setState on parent inside child component
- React Router match is undefined using Typescript
- Using i18next for a react production build causes the translation to display only strings
- React Hooks onChange not accepting input
- How to test trigger on change event by selecting data list
- creat-react-app build not accepting styles
- Add google trends in react
- Unexpected token = (with espree parser in module mode) in my react project using sonar-scanner
- Nextjs dont load infogram script
- Two ways to define methods in react,what's the different?
- Problems with Testcafe LocalStorage
- React ESLint (react/display-name) Not Working
- React error when removing input component
- ReactJS error in syntax at render function
- Spacing between antd Image components in React
- react-select detached reset button does not work with disabled attribute
- When do I need to create new Promises in javascript not fetch them?
- The React Application does not work as intended when submitting a form
- How to test this component with react testing library - just a starter with this new testing library
- How to optimize performance with CREATE, PUT, and DELETE requests on MongoDB?
- Using tab key to move focus from data grid to next page element
- Show/hide field based on the value of another field using redux-form
- Creating Styled component with multiple elements
- Get offset/height of a child component in React
- Passing JSON data from Django to React component