React-Router-DOM 不适用于嵌套路径

Question

我有一个简单的 AppContainer 组件，我正在使用：

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

导航包抛出整个应用程序。但由于某些原因，当我试图去到/ 基本位置的更深位置时，它不起作用。现在，我总是在任何location_1/2/3/4 路径上遇到错误...错误消息：

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“default-src 'self'”。 '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>
  )
}

附： 我承认，我的基本路径 / 工作正常。

如果有任何帮助，我将不胜感激。

Answer 1

尝试使用<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>
  )
}

Answer 2

试试这个：

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