我是 React 和 React-router 的新手。该应用程序是使用 create-react-app 创建的.我需要在我的应用程序中使用两个主要页面实现路由。我尝试了很多选项,并最终使用以下代码使其工作。
此代码在开发期间运行良好。但是在构建应用程序后,它无法正常工作。仅显示到 404 页面的路由。请帮我解决这个问题。
<Router history={browserHistory}>
<Route component={Root}>
<IndexRoute component={App} />
<Route path="/" component={App} />
<Route path="/sna/:country" component={SNA} />
<Route path="*" component={FourOFour}/>
</Route>
</Router>
我已经使用 browserHistory
使用以下代码在更改下拉菜单时启用导航。
selectCountry(event){
var value = event.target.value;
browserHistory.push('/sna/' + value);
}
package.json
{
"name": "my-app",
"version": "0.1.0",
"homepage": "./",
"private": true,
"dependencies": {
"bootstrap": "^3.3.7",
"react": "^15.4.2",
"react-addons-update": "^15.4.2",
"react-bootstrap": "^0.30.8",
"react-data-grid": "^2.0.24",
"react-dom": "^15.4.2",
"react-router": "^2.6.0"
},
"devDependencies": {
"react-scripts": "0.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
最佳答案
这是一个潜在的服务器相关问题。您可能正在运行 Apache,并且它正在监听 :80。
对于 Apache 服务器:
确保您的 Apache 服务器将每个请求重定向到 index.html 文件。确保 .htaccess 中存在以下代码
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
关于javascript - 构建应用程序后 react 路由器不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43324649/