理解的变化作出反应，路由器V4

我有一门课程按照顺序来学习React.js。这是一个伟大的，非常有帮助的，但我一直在工作中遇到错误react-router

从我读过的时候，我正在尝试学习，并同时理解它，所以会让它更加混乱。

错误

warning.js：36警告：无法丙类型：该道具history被标记如Router必需的，但它的值是undefined。在路由器（在index.js：12）

问题

请能够解释为什么这不会在V4工作

<Router history={browserHistory}> 

"dependencies": { 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4", 
    "react-router": "^4.1.1" 
    },

例

ReactDOM.render(
    <Router history={browserHistory}> 
     <Route path="/" component={Home} /> 
     <Route path="/services" component={Services} /> 
     <Route path="/portfolio" component={Portfolio} /> 
     <Route path="/about" component={About} /> 
     <Route path="/contact" component={Contact} /> 
     <Route path="*" component={Fourofour} /> 
    </Router> 

, 
    document.getElementById('root') 
);

一些轻

进口

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, browserHistory } from 'react-router' 
import Fourofour from './containers/fourofour/Fourofour'; 
import Home from './containers/home/Home'; 
import Services from './containers/services/Services'; 
import Portfolio from './containers/portfolio/Portfolio'; 
import About from './containers/about/About'; 
import Contact from './containers/contact/Contact';

来源

2017-04-23 wuno

你的意思是“这不适用于V4”？它会工作。代码将被编译。 –

嘿，谢谢你的帮助。我要解决我的错误。如果你有时间你会介意看我目前的项目吗？ https://github.com/wuno/react-components – wuno

你看到什么错误？ –

变化

<Route path="/" component={Home} />

到

<Route exact path="/" component={Home} />

，你可能会得到更好的结果。正如您现在所知，/services（和其他路径）也将匹配/路径。

有关exact关键字的更多信息可在React Router V4 docs找到。

如果要指定在<Router> componenent历史，你需要在你的代码手动创建历史（<BrowswerRouter>为您创建它，所以你不需要指定history道具吧）。您可以通过创建一个新的文件，这样做：

// utils/history.js 
import { createBrowserHistory } from 'history'; 

export default createBrowserHistory({ 
    /* pass a configuration object here if needed */ 
});

然后你需要的地方使用历史：

import history from './utils/history'; 

<Router history={history}> 
...

您还需要安装史上包：

npm install history --save

React Router V4文档也有一个example of using a custom history。

最后，如果您从未使用历史记录对象，则可以使用<BrowserHistory> component，它将为您管理历史记录，而无需创建自定义历史记录对象。

来源

2017-04-23 13:41:22

我改变了这一点，但我得到了同样的问题。 warning.js：36警告：失败的道具类型：道具'history'在'Router'中被标记为必需，但其值为'undefined'。在路由器（在index.js：12） – wuno

看到我更新的答案。 –

是的，谢谢你我想弄清楚如何将它融入到我的项目中。但是我面临的问题是理解为什么我当前的代码不起作用。 – wuno

理解的变化作出反应，路由器V4

回答

相关问题