将道具传递给function路由器4中的嵌套路由。TypeError: render不是一个函数

Question

我正在尝试创建像这样的嵌套路由，遵循this，所以回答

/--Home
|--campaigns
   |--campaigns/:cid

Index.js

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
    ,
    document.getElementById('root'));
registerServiceWorker();

App.js

class App extends Component {
  render() {
    return (
        <div>
          <Route exact path="/" render={(props) => <Home foo="bar" {...props}/>}/>
          <Route path="/campaigns" render={(props) => <Campaigns foo="bar" {...props}/>}/>
        </div>
    );
  }
}

Home.js

const Home = () => (
    <div>
        Home
    </div>
)

Campaigns.js

const Campaigns = () => (
    <div>
        <Route exact path="/campaigns" render={<div>Campaigns</div>}/>
        <Route path="/campaigns/:cid" render={(props) => <Campaign {...props} foo="bar"/>}/>
    </div>
)

Campaign.js

const Campaign = () => (
    <div>
        <Route path="/campaigns/:cid" render={<div>Campaign 1</div>}/>
    </div>
)

我使用该方法，因为我不能使用该方法将道具传递给组件。

当/路由正常工作时，当我浏览到/campaigns时，我得到: TypeError: render不是一个函数

Answer 1

这个错误是很清楚的。render支柱接受一个函数作为它的值，而不是元素。因此，只需将其改为：

const Campaigns = () => (
    <div>
        <Route exact path="/campaigns" render={() => <div>Campaigns</div>}/>
        <Route path="/campaigns/:cid" render={(props) => <Campaign {...props} foo="bar"/>}/>
    </div>
);

const Campaign = () => (
    <div>
        <Route path="/campaigns/:cid" render={() => <div>Campaign 1</div>}/>
    </div>
);