构建应用程序后反应路由器不工作 [英] React router not working after building the app

问题描述

我是反应和反应路由器的新手.该应用程序是使用 create-react-app 创建的.我需要在我的应用程序中使用两个主要页面实现路由.我尝试了很多选项，最终使用以下代码使其工作.

此代码在开发过程中运行良好.但是在构建应用程序后，它无法正常工作.404 页面的路由只会显示出来.请帮我解决这个问题.

<路由组件={Root}><IndexRoute 组件={App}/><Route path="/" component={App}/><Route path="/sna/:country" 组件={SNA}/><Route path="*" component={FourOFour}/></路线></路由器>

我已使用 browserHistory 启用导航以使用以下代码更改下拉列表.

selectCountry(event){var value = event.target.value;browserHistory.push('/sna/' + value);}

package.json

<代码> {"name": "我的应用程序",版本":0.1.0"，主页": "./"，私人":真的，依赖关系":{"bootstrap": "^3.3.7",反应":^ 15.4.2"，"react-addons-update": "^15.4.2",反应引导":^0.30.8"，反应数据网格":^ 2.0.24"，"react-dom": "^15.4.2",反应路由器":^ 2.6.0"},开发依赖":{反应脚本":0.9.5"},脚本":{开始":反应脚本开始"，"build": "react-scripts build","test": "反应脚本测试 --env=jsdom",弹出":反应脚本弹出"}}

解决方案

在 react-router 上卡住几天后，我阅读了 反应训练.然后我按照快速入门步骤进行了修改以满足我的要求.

import {HashRouter 作为路由器，路线，来自'反应路由器-dom';<路由器><div><标题/><路由精确路径="/" component={Content}/><Route path="/:country" component={SnaContent}/><页脚/>

</路由器>

这暂时解决了这个问题.希望对遇到类似问题的其他人有所帮助.

I am new to react and react-router. The app is created using create-react-app. I need to implement routing in my app with two main pages. I have tried many options and finally made it work with the following code.

This code works fine during development. But after building the app, its not working properly. The route to 404 page is only getting displayed. Please help me resolve this.

<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>

I have used browserHistory to enable navigation on changing a dropdown using below code.

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"
  }
}

解决方案

After getting stuck on react-router for a couple of days, I read the documentation in React Training. Then I followed the quick start steps and modified it to satisfy my requirements.

import {
  HashRouter as Router,
  Route,
  } from 'react-router-dom';

  <Router>
    <div>
      <Header />
      <Route exact path="/" component={Content} />
      <Route path="/:country" component={SnaContent} />
      <Footer />
    </div>
  </Router>

This have fixed the issue for now. Hope its helpful for others who faced similar issue.

这篇关于构建应用程序后反应路由器不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！