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

标签 reactjs routes react-router react-router-v4 react-router-dom

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

npm install react-router

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

  • react-router@4.3.1 updated 1 package in 19.53s

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

我知道编译器找不到路由类,并且我在谷歌和这个社区上搜索了像我的问题这样的问题,但实际上我的搜索结果没有帮助。感谢您的回复。

最佳答案

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

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

React-Router v4 不支持 IndexRoute,您可以使用精确的 Route 来代替 IndexRoute,例如

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

编辑:

react-router v4 不支持 browserHistory,因此这里有替代解决方案 https://github.com/ReactTraining/react-router/blob/25776d4dc89b8fb2f575884749766355992116b5/packages/react-router/docs/guides/migrating.md#the-router

关于reactjs - React-JS/react-router-dom中的路由问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52772413/

相关文章:

javascript - 不带钩子(Hook)地更新文档标题

routes - Flutter 重定向到 initState 上的页面

javascript - 是否需要 Redux 在左侧显示 ItemList,在右侧显示 ItemContent?

react-router - 使用 React Loadable 和 React Router 基于路由预取?

typescript - react 路由器 typescript 导航0.13.3 - 无法读取属性 'router'

javascript - React 无法从传递的 prop 中读取触发器上未定义的属性(读取, 'setState')

reactjs - Jest 测试失败 SyntaxError,意外的 token 导出

php - Laravel 路由组第二个参数?

reactjs - 如何使用 OAuth 中的访问 token 获取 Google 用户个人资料信息?

javascript - 为什么使用多个子路由器时会出现 404?