Как использовать реакции-маршрутизатор BrowserRouter в статическом файле index.html - PullRequest
Новая
       30

Как использовать реакции-маршрутизатор BrowserRouter в статическом файле index.html

2 голосов
/ 14 апреля 2019

Я пытаюсь использовать статический файл index.html, сгенерированный npm run build, вместе с реагирующим маршрутизатором. тл; др; я не хочу клиентский сервер, я хочу, чтобы приложение загружалось, открывая файл index.html, расположенный в папке сборки, и при этом BrowserRouter мог маршрутизировать компоненты. На данный момент страница будет загружать «домашний» компонент, если я исключу «точный» реквизит в пути маршрута, а это означает, что он знает, что он где-то там, я просто не знаю, как настроить маршрутизатор, чтобы он это знал ». C: /Users/Myself/Project/app/build/index.html 'равен пути' / 'и последующему маршруту к каждому компоненту. если включен точный реквизит, он просто загружает стандартный компонент 404. Как мне настроить базовое имя BrouserRouter и / или «домашнюю страницу» package.json для маршрутизации к компоненту index.html-> load «home» при первоначальном открытии страницы?

вещи, которые я не хочу делать: обслуживать папку сборки. - настроить веб-пакет - иметь доступное приложение от 'http://localhost:XXXX' - изменить использование HashRouter (я хочу получить доступ к props.history.push)

По моему мнению, если приложение может показывать «домашний» компонент без указания точного, это означает, что оно может достигнуть его при определенных обстоятельствах, и я просто не указываю, каков индексный путь правильно, то есть он где-то там, как ../project/build/index.html/somewhere

Я уже настроил для package.json «homepage»: «.» И указал базовое имя BrowserRouter = {'/ build'}

Мой BrowserRouter: 

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

Мой файл rout.js: 

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

Я хочу, чтобы конечный результат установил c: /users/myself/project/app/build/index.html равным маршруту «home» ('/').

Я согласен с тем, что это невозможно, но, как указано выше, возможность получить к нему доступ с неточного пути приводит меня к мысли, что я могу сделать это точно, и я просто испортил конфигурацию маршрута

...