解决React-router-dom 4.0+路由跳转时出现警告： Warning: Failed prop type: Invalid prop 'compo

解决React-router-dom 4.0+路由跳转时出现警告： Warning: Failed prop type: Invalid prop 'component' of type 'object' supplied to 'Route', expected 'function'.

备注：这个警告在5.0+的路由中已经被修复，一下内容提供给由于种种原因提供给不方便更换版本的同学一个思路。

最近在使用React全家桶做项目，刚从vue转过来看来两天文档截至目前撸的很愉快，直到开始使用路由的时候出现以上警告...故事开始了。。。。停停停 直入主题吧

环境

• "react": "^16.8.6"
• "react-router-dom": "^4.3.1"

我使用路由版本是4.3.1测试所有4.0+版本都会出现以上警告。

代码

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { Provider } from "react-redux";
import store from '@/store';
import Home from "@/pages/home/home.jsx";
import Detail from "@/pages/detail/detail.jsx";

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <div>
          <BrowserRouter>
            <div>
              <Route path="/" exact component={Home}></Route>
              <Route path="/detail/:id" exact component={Detail}></Route>
            </div>
          </BrowserRouter>
        </div>
      </Provider>
    );
  }
}
export default App;

解决方案

方案一

将组件通过函数返回，即：

<Route path="/home/" exact component={() => <Home />}></Route>
<Route path="/detail/:id" exact component={() => <Detail />}></Route>

但是这种方式通过params路由传参打印this.props得不到我们想要的，即获取不到this.props.match.params.id参数。。。传参只可以通过store，如果是小型不需要Redux的项目那岂不是很蛋疼。。

方案二

我们解读一下报警告的内容大致意思就是props需要通过函数返回而不是对象。那是不是可以换种写法把props当作参数传递给路由呢。。答案是显然的。。

<Route path="/home/" exact component={(props) => <Home {...props} />}></Route>
<Route path="/detail/:id" exact component={(props) => <Detail {...props} />}></Route>

大功告成，传参，警告都ok了。。。。

ps:stackoverflow真的是一个很好的导师

以上。