將道具傳遞到React Router 4中的嵌套路由。TypeError：render不是一個函數

Question

我正在按照此答案創建這樣的嵌套路由

/--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>
);