정적 인덱스.html 파일에서 react-router BrowserRouter를 사용하는 방법

정적 인덱스.html 파일에서 react-router BrowserRouter를 사용하는 방법

npm run build로 생성된 static index.html 파일을 react-router와 함께 사용하려고 한다.tl;dr is; 나는 클라이언트 서버를 원하지 않는다. 나는 빌드 폴더에 있는 index.html 파일을 열어 앱을 로드하고 BrowserRouter가 구성 요소들 사이를 라우팅할 수 있기를 원한다.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 in뭉쳐서 표준 404 성분만 적재한다.BrouserRouter 기본 이름 및/또는 패키지를 구성하는 방법json "protection" 페이지를 처음 열 때 index.continue-> load 'home' 구성 요소로 라우트하려면?

내가 하고 싶지 않은 일: - 빌드 폴더 서비스. - 웹 팩 구성 - 'http://localhost:XXXX'에서 액세스할 수 있는 앱으로 변경 - HashRouter 사용으로 변경(소품 액세스 원).history.properties)

내 생각에는 앱이 정확한 지정 없이 '홈' 컴포넌트를 보여줄 수 있다면, 그것은 어떤 상황에서 그것에 도달할 수 있다는 것을 의미하며, 나는 단지 인덱스 경로가 무엇인지를 제대로 명시하지 않고 있을 뿐, 즉 그것은 어딘가에 있는 것과 같은 ../프로젝트/빌드/index.html/어느 어딘가에 있다.

나는 이미 패키지를 구성했다.json을 "홈페이지"로 설정하고 BrowserRouter 기본 이름={'/build'}을(를) 지정하십시오.

내 BrowserRouter:

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

내 경로.js 파일:

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

    </div>
  )
}

내 소포장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"
  }
}

최종 결과가 c:/users/myself/project/app/build/index.html을 동일한 경로 'home'('/')로 설정했으면 한다.

나는 이것이 가능하지 않다는 것을 기꺼이 받아들이지만, 위에서 말한 것처럼, 부정확한 경로에서 그것에 접근할 수 있다는 것은 내가 그것을 정확하게 만들 수 있다고 믿게 하고 단지 경로 구성을 엉망으로 만들고 있다.

응용 프로그램이 정적 파일 서버에서 호스트되는 경우<HashRouter>a 대신에<BrowserRouter>.

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

다음과 같은 웹 사이트의 경우www.example.com/path/to/index.html, 당신은 시도해야 한다.<HashRouter>.

다음과 같은 웹 사이트의 경우www.example.com<BrowserRouter>가 아닌 고친 후이 필요하다Nginx와 같은 서버는 루트가 아닌 페이지를 새로 고친 후 적절한 렌더를 위해 추가 구성이 필요하다.

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

사용할 필요 없다.HashRouter.

서비스를 제공하도록 정적 웹 서버만 구성index.html당신이 정의한 모든 경로에 대해.예를 들어 Nginx를 사용하는 경우 이 예제 구성 파일을 참조하십시오.Apache 또는 Express를 사용하는 경우 다음을 참조하십시오.

DigitalOcean에 정적 사이트를 배포하는 경우 아래의 앱 사양에 모든 경로를 지정하십시오.Your App > Settings > App Spec.

a만 추가하십시오.path아래 파일에 대한 각 경로에 대해static_sites > routes.

그러면 각 경로는 반응 라우터에 의해 처리될 당신의/경로로 전달될 것이다.

추가 정보: https://docs.digitalocean.com/products/app-platform/concepts/http-route/

참조URL: https://stackoverflow.com/questions/55670845/how-to-use-react-router-browserrouter-in-a-static-index-html-file