React-Router 如何将链接链接到实际页面答案

【问题标题】：React-Router how to link the links to the actual pageReact-Router 如何将链接链接到实际页面
【发布时间】：2017-12-28 22:29:09
【问题描述】：

编辑：我发现当直接这样进行时，浏览器会尝试查找名为“定价”的文件，我怎样才能让浏览器不这样做并查找 index.html？我在 webpack-dev-server 上运行

Edit2：我现在有点明白了，我想链接 localhost:8080/pricing 直接进入 index.html 然后运行路由器并进入定价组件，我该怎么做？

我已经在网站上设置了一个 React-Router，但是当直接访问特定页面时（例如：localhost:8080/pricing），它给了我以下错误：

Content Security Policy: The page’s settings blocked the loading of a resource at blob:http://localhost:7080/685880ef-cf95-4ccf-a6f6-3d8c182ee941 (“default-src http://localhost:7080”).
Content Security Policy: The page’s settings blocked the loading of a resource at self (“default-src http://localhost:7080”). Source: ;(function installGlobalHook(window) {...

这是我的页面代码

ReactDOM.render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>
    ,
  document.getElementById('app'));

export default class App extends React.Component {
  render(){
    return (
      <div>
        <Header/>
        <Body/>
        <Footer/>
      </div>
    );
  }
} 

class Body extends React.Component {
  render(){
    return (
      <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/pricing' component={Pricing}/>
        <Route path='/contactus' component={ContactUs}/>
        <Route path='/buy' component={Buy}/>
      </Switch>
    );
  }
}

请注意，如果我直接访问主页，如果我转到 localhost:8080 然后使用我的链接在其他页面之间导航，它会起作用

【问题讨论】：

你看过这些吗？ content security policy the pages settings blocked the loading of resource content security policy the pages settings blocked the loading of a resource
和我的问题不一样，我应该更新我的标题并多看看，因为我意识到问题不是我想的那样
听起来你的 webpack 配置很有趣。您需要自定义配置吗？如果您尝试使用 create-react-app 怎么办？

标签： javascript reactjs react-router

【解决方案1】：

我想问题出在你的 webpack 配置上，你需要将 historyApiFallback 添加到你的 devServer 部分：

此配置将允许您直接进入定价页面。

devServer: {
  historyApiFallback: true,
  host: '0.0.0.0',
  hot: true,
  port: 3000
}

或在您的 scripts 部分（在您的 package.json 文件中）：

"scripts": {
  "start": "webpack-dev-server --history-api-fallback"
}

查看this 以查看文档。

【讨论】：