How to use react-router BrowserRouter in a static index.html file

Question

I'm attempting to use the static index.html file generated by npm run build, along with react-router. the tl;dr is; i do not want a client server, I want the app to be loaded by opening the index.html file located in the build folder and still have BrowserRouter be able to route between components. At the moment, the page will load the 'home' component if I exclude the 'exact' prop in the route path, meaning it knows that it's out there somewhere, I just don't know how to configure the router to know that 'C:/Users/Myself/Project/app/build/index.html' is equal to the path of '/' and route to each component thereafter. if the exact prop is included, it just loads the standard 404 component. How should i configure the BrouserRouter basename, and/or the package.json "homepage" in order to route to the index.html-> load 'home' component when the page is initially opened?

things I do not want to do: - serve the build folder. - configure webpack - have the app accessible from 'http://localhost:XXXX' - change to use HashRouter (I want access to props.history.push)

In my mind, if the app can show the 'home'component without specifying exact, it means that it can reach it under certain circumstances, and i'm just not specifying what the index path is properly, i.e it is somewhere out there at like ../project/build/index.html/somewhere

I have already configured the package.json to have "homepage": ".", and have specified the BrowserRouter basename={'/build'}

My BrowserRouter:

<BrowserRouter basename={'/build'}>
   <Routes />
</BrowserRouter>

My routes.js file:

const Routes = (props) => {
  return (
    <div>
      <Switch>
        <Route path={routes.HOME} component={Home} />
        <Route render={(props) => <div>404 - Not Found</div>} />
      </Switch>

    </div>
  )
}

my package.json:

{
  "name": "cra",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.0.2",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "node-sass": "^4.11.0"
  }
}

I want the end result to set c:/users/myself/project/app/build/index.html to equal route 'home' ('/').

I'm willing to accept that this is not possible, but as stated above, being able to access it from an inexact path leads me to believe i can make it exact and am just messing up the route config

Answer 1

If your application is hosted on a static file server, you need to use a <HashRouter> instead of a <BrowserRouter>.

FAQ.md#why-doesnt-my-application-render-after-refreshing

For a website like www.example.com/path/to/index.html, you need to try a <HashRouter>.

For a website like www.example.com, <BrowserRouter> might work. The server like Nginx needs an extra config for proper renders after refreshing non-root pages.

location / {
   try_files $uri /index.html;
}