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

Question

编辑:我发现当像那样直接进行时，浏览器会尝试查找名为“pricing”的文件，我怎样才能让浏览器不这样做并查找 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 然后使用我的链接在其他页面之间导航)，它会起作用

Answer 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出去看看文档。