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

Posted 2023-02-21

【中文标题】由于缺少 <script> 无法看到关于页面路由但能够到达主页路由

【英文标题】：Cannot see About page route but able to reach Home page route due to missing <script>

【发布时间】：2018-01-21 13:43:04

【问题描述】：

我似乎无法弄清楚为什么我无法访问我的关于页面。我可以去我的HomePage，但不能去我的AboutPage。当我查看开发人员工具时，在localhost:3000 中，我看到带有<script type="text/javascript" src="/bundle.js"></script> 的主页内容。但是，在 localhost:3000/about 我没有看到 <script> ！它缺少捆绑包

App.js

import React from 'react';
import Header from './common/Header';
import Footer from './common/Footer';
import Switch, Route from 'react-router-dom';
import HomePage from './home/HomePage';
import AboutPage from './about/AboutPage';

class App extends React.Component 
  constructor(props, context) 
    super(props, context);
    this.state = ;
  

  render() 
    return (
      <div>
        <Header/>
        <Switch>
          <Route exact path="/" component=HomePage/>
          <Route path="/about" component=AboutPage/>
        </Switch>
        <Footer/>
      </div>
    );
  


export default App;

关于Page.js

import React from 'react';

class AboutPage extends React.Component 
  constructor(props, context) 
    super(props, context);
    this.state = ;
  

  render() 
    return(
      <div>
        about pagesdfsdf
      </div>
    );
  


export default AboutPage;

index.js

import React from 'react';
import render from 'react-dom';
import BrowserRouter from 'react-router-dom';
import Provider from 'react-redux';
import configureStore from './store/configureStore';
import App from './components/App';

const store = configureStore();

render(
  <Provider store=store>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </Provider>,
  document.getElementById('app')
);

【问题讨论】：

你需要添加 React Router Redux :-) 你是如何在你的路由之间移动的？你的环境怎么样？

@Win 只是在调查。 react-router-dom (v4) + redux。 Webpack 作为构建工具。仅使用 Express 来提供前端代码。 Django 作为 API

【参考方案1】：

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

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

【讨论】：

你认为我需要react-router-redux 像建议的那样吗？我正在处理 redux

不，没有它你应该没问题。

【参考方案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