这个问题已经在这里有了答案：            >            Passing custom props to router component in react-router v4                                    1个
我不知道为什么我们要使用类似{… props}的东西

例如,在我的代码中(当我学习路由器时),我这样做

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Home from './home.js';

const route = () => {
    return(
        <BrowserRouter>
            <Switch>
                <Route path ="/"  render ={(props) => <Home {...props}/>} />
            </Switch>
        </BrowserRouter>
    )
}

export default route;

在这里,这个传递函数/并可能称之为给他道具

从’react’导入React；

const home =  (props) =>  {
  console.log(props)
  return (
  <div> home </div>
  );
}

export default home;

这将记录这样的事情

{match: {…}, location: {…}, history: {…}, staticContext: undefined}

但是,如果我从家中移除{… props},它将不会记录此内容

{match: {…}, location: {…}, history: {…}, staticContext: undefined}

任何人都可以分步/或详细解释发生了什么,为什么我们需要它？

解决方法:

赋予路径的渲染道具的功能用route props listed in the documentation调用.通过将它们传播到Home组件上,您只是传递了这些道具,因此它们也可以在Home组件道具中使用.

如果仅将路线道具向下传递到给路线的渲染道具提供的功能中的组件,请考虑改用组件道具：

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