Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

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

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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;
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...