React-JS中的路由问题/ react-router-dom

时间:2018-10-12 04:43:39

标签: reactjs routing react-router react-router-v4 react-router-dom

我通过在命令提示符窗口中运行以下代码段在项目中安装了react-router

  

npm install react-router

我发现react-router已成功安装,因为安装没有错误,并且输出是:

  
      
  • 反应路由器@ 4.3.1   在19.53秒内更新了1个程序包
  •   

基于tutorial,我将Index.js设置为以下代码:

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home} />
         <Route path = "home" component = {Home} />
         <Route path = "about" component = {About} />
         <Route path = "contact" component = {Contact} />
      </Route>
   </Router>
), document.getElementById('app'))

现在,当我要编译/构建应用程序时,会出现以下错误:

./src/index.js
  Line 14:  'Router' is not defined          react/jsx-no-undef
  Line 14:  'browserHistory' is not defined  no-undef
  Line 15:  'Route' is not defined           react/jsx-no-undef
  Line 16:  'IndexRoute' is not defined      react/jsx-no-undef
  Line 17:  'Route' is not defined           react/jsx-no-undef
  Line 18:  'Route' is not defined           react/jsx-no-undef
  Line 19:  'Route' is not defined           react/jsx-no-undef

我知道编译器找不到路由类,并且我已经在Google和这个社区上搜索了诸如此类的问题,但是实际上我的搜索结果没有帮助。谢谢您的回复。

1 个答案:

答案 0 :(得分:4)

在调用它们之前,您需要导入Router,Route并在index.js文件中

 import { Router, Route } from "react-router";

React-Router v4不支持IndexRoute,而是可以使用Route来代替IndexRoute之类的

  <Route exact path={path} component={Component} />

编辑:

browserHistory在react-router v4中不受支持,因此这里https://github.com/ReactTraining/react-router/blob/25776d4dc89b8fb2f575884749766355992116b5/packages/react-router/docs/guides/migrating.md#the-router

有替代的解决方案