看不到关于页面路由，但由于缺少<script>，因此能够到达主页路由

Question

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

应用.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;

关于页面.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;

索引.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')
);

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
}