在路由期间将props传递给组件

时间:2018-04-19 04:54:10

标签: reactjs

import React from 'react';
import SearchDocument from './components/searchDocument';
import CreateRequest from './components/createRequest';
import { BrowserRouter as Router } from "react-router-dom";
import { Route, Switch } from 'react-router-dom';
class App extends React.Component {
    render() {
        return (
            <Router>
                <div>
                    <Switch>
                        <Route exact path='/' component={Home} />
                        <Route path='/home' component={Home} />
                        <Route path='/create' component={CreateRequest} />
                        <Route path='/searchDocument' component{SearchDocument} />
                        <Route path='/upload' component={UploadDocument} />
                        <Route path='/search' component={Search} />
                    </Switch>
                </div>
            </Router>
        );
    }
}
export default App;

我是新的反应路由器。我想通过路由传递props来创建请求组件。我尝试了不同的方法来传递道具,但这不起作用。任何人都可以建议,如何发送{{ 1}}到组件以及如何在该组件中处理它们。以上是我的代码。提前谢谢

1 个答案:

答案 0 :(得分:1)

正如评论中所述,您可以使用render道具代替component

来自docs

  

您可以传入一个在位置匹配时调用的函数,而不是使用组件prop为您创建新的React元素。渲染道具接收与组件渲染道具相同的所有路径道具。

您的代码示例如下:

<Route path='/searchDocument' render={(props) => <SearchDocument yourNewProp={yourNewProp} {...props} />} />