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

Question

我通过运行命令提示符中的以下代码片段在我的项目中安装了 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'))

现在，当我想要 compile/build 我的应用程序时，出现了这些错误：

./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 和这个社区上搜索过类似我的问题，但实际上我的搜索结果没有帮助。感谢您的回复。

Answer 1

你需要先导入 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

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

Routing problem in React-JS / react-router-dom

routing

reactjs

react-router

react-router-v4

react-router-dom