React-Router-DOM не работает с вложенными путями - PullRequest
Новая
       6

React-Router-DOM не работает с вложенными путями

0 голосов
/ 14 сентября 2018

У меня есть простой компонент AppContainer, где я использую: 

"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8"

пакетов для навигации по всему приложению.Но по некоторым причинам, это не работает в случае, когда я пытаюсь перейти в более глубокое местоположение, которое / базовое местоположение.И сейчас я всегда получаю сообщение об ошибке на любом из location_1/2/3/4 путей ... Сообщение об ошибке:

Отказано в выполнении встроенного сценария, поскольку оно нарушает следующую директиву политики безопасности содержимого: "default-src«я».Либо ключевое слово unsafe-inline, хэш

Моя структура AppComponent: 

import { BrowserRouter, Route, Switch } from 'react-router-dom'


export const AppContainer = ({ store, history }) => {
  return (
    <Provider store={store}>
      <BrowserRouter history={history}>
        <Switch>
          <Route exact path="/" render={() => <CoreLayout children={<Hub />} /> }/>
          <Route path="/location_1" render={() => <Component_Holder.component {...store} children={<Component_1 {...store} />} /> }/>
          <Route path="/location_2" render={() => <Component_2 {...store} /> }/>
          <Route path="/location_3" render={() => <Component_3 {...store} /> }/>
          <Route path="/location_4" render={() => <Component_4 {...store} /> }/>
        </Switch>
      </BrowserRouter>
    </Provider>
  )
}

PS Я могу признать, что мой базовый путь / работает нормально.

Буду благодарен за любую помощь.

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Попробуйте использовать <HashRouter> вместо <BrowserRouter> для обслуживания вашего приложения Routing. Я думаю, что это основная проблема в вашем случае, которая возникает, когда вам нужно обслуживать старомодную маршрутизацию hash, например: app.com/#/some_nested_route_page.

А также потому, что решение @Ricardo Costa должно было сработать ...

Итак, возьмите это и попробуйте снова: 

import { HashRouter, Route, Switch } from 'react-router-dom'

export const AppContainer = ({ store, history }) => {
  return (
    <Provider store={store} history={history}>
      <HashRouter>
        <Switch>
          <Route exact path="/" render={() => <CoreLayout children={<Hub />} /> }/>
          <Route path="/location_1" render={() => <Component_Holder.component {...store} children={<Component_1 {...store} />} /> }/>
          <Route path="/location_2" render={() => <Component_2 {...store} /> }/>
          <Route path="/location_3" render={() => <Component_3 {...store} /> }/>
          <Route path="/location_4" render={() => <Component_4 {...store} /> }/>
        </Switch>
      </HashRouter>
    </Provider>
  )
}
0 голосов
/ 14 сентября 2018

Попробуйте это: 

      <Route
        path={yourPath}
        component={store => (
          <Component_2 {...store} title={'Dashboard'} />
        )}
      />
...