Question

我似乎无法弄清楚为什么我无法访问我的页面。我可以转到我的 HomePage 但不能转到我的 AboutPage 。当我查看开发人员工具时，在 localhost：3000 中，我看到带有＆lt; script type =“text / javascript”src =“/ bundle.js”＆gt;＆lt; /脚本＆GT; 。但是，在 localhost：3000 / about 中，我没有看到＆lt; script＆gt; ！缺少捆绑

＆＃xA;＆＃xA;  App.js 
＆＃xA;＆＃xA;  从'react'导入React;＆＃ xA;从'./common/Header'中导入标题;＆＃xA;从'./common/Footer'导入页脚;＆＃xA;从'react-router-dom'导入{Switch，Route};＆＃xA ;从'./home/HomePage'中导入HomePage;＆＃xA;从'./about/AboutPage';＆＃xA;＆＃xA;类中导入AboutPage扩展React.Component {＆＃xA;构造函数（props，context）{＆＃xA;超级（道具，背景）;＆＃xA; this.state = {};＆＃xA; }＆＃XA;＆＃XA; render（）{＆＃xA; return（＆＃xA;＆lt; div＆gt;＆＃xA;＆lt; Header /＆gt;＆＃xA;＆lt; Switch＆gt;＆＃xA;＆lt; Route exact path =“/”component = {HomePage} /＆gt;＆ #xA;＆lt;路径路径=“/关于”component = {AboutPage} /＆gt;＆＃xA;＆lt; / Switch＆gt;＆＃xA;＆lt;页脚/＆gt;＆＃xA;＆lt; / div＆gt;＆＃ xA;）;＆＃xA; }＆＃xA;}＆＃xA;＆＃xA;导出默认App;＆＃xA;  
＆＃xA;＆＃xA;  AboutPage.js 
＆＃ xA;＆＃xA;   import来自'react'的反应;＆＃xA;＆＃xA;类AboutPage扩展了React.Component {＆＃xA;构造函数（props，context）{＆＃xA;超级（道具，背景）;＆＃xA; this.state = {};＆＃xA; }＆＃XA;＆＃XA; render（）{＆＃xA;返回（＆＃xA;＆lt; div＆gt;＆＃xA;关于pagesdfsdf＆＃xA;＆lt; / div＆gt;＆＃xA;）;＆＃xA; }＆＃xA;}＆＃xA;＆＃xA;导出默认值AboutPage;＆＃xA;  
＆＃xA;＆＃xA;  index.js 
＆＃ xA;＆＃xA;   import来自'react'的反应;＆＃xA;从'react-dom'导入{render};＆＃xA;从'react-router-dom'导入{BrowserRouter} ;＆＃xA;从'react-redux'导入{Provider};＆＃xA;从'./store/configureStore'中导入configureStore;＆＃xA;从'./components/App';＆＃xA;导入App ＆＃xA; const store = configureStore（）;＆＃xA;＆＃xA; render（＆＃xA;＆lt; Provider store = {store}＆gt;＆＃xA;＆lt; BrowserRouter＆gt;＆＃xA;＆lt; App /＆gt;＆＃xA;＆lt; / BrowserRouter＆gt;＆＃xA;＆lt; / Provider＆gt;，＆＃xA; document.getElementById（'app'）＆＃xA;）;＆＃xA;  ＆＃XA;

Answer 1

<BrowserRouter>需要更多设置 - 你有服务器吗？您可能希望切换到<HashRouter>，因为它更容易启动和运行。至少，它可以解决您现在遇到的问题并使您的代码正常工作。

此处参考差异：https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

Answer 2

我将假设您正在为您的应用使用webpack。因此，为了使BrowserRouter正常工作，您必须在webpack.config.js中提供以下配置

在输出部分

output: {
    filename: 'app.bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath : '/' // set the public path to root
  }

在服务器部分

devServer: {
    hot : true,
    contentBase: path.join(__dirname, "dist"),
    historyApiFallback : true,  // set the historyApiFallback to true                  
    compress: true,
    port: 8080
  }

由于缺少<script>，无法看到关于页面路径但能够到达主页路径

2 个答案: