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

Question

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

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

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

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash

我的 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>
  )
}

P.S。我承认，我的基本路径 / 正常工作。

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

Answer 1

试试这个：

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

Answer 2

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

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

React-Router-DOM does not work with nested paths

reactjs

react-router

react-router-v4

react-router-dom