將道具傳遞給React Router 4中的組件

我是react-router的新手，剛開始使用react-router V4編寫應用程序。我想將道具傳遞給由<Match />提供的組件，我想知道什麼是「最佳」或「正確」的方式。將道具傳遞給React Router 4中的組件

這是通過做這樣的事情嗎？

<Match pattern="/" render={ 
    (defaultProps) => <MyComponent myProp = {myProp} {...defaultProps} /> 
}/>

這是（通過道具由<Match />被渲染組件），即使一個很好的做法來與路由器這樣做還是一個反什麼的;如果是這樣，爲什麼？

來源

2016-10-05 Dimitris Karagiannis

看起來對我好。 –

我會這樣做，以提高清晰度。

const myComponent = <MyComponent myProp={myProp} {...defaultProps} /> 


<Match pattern="/" component={myComponent} />

通過這個你的router代碼不會弄亂！

來源

2016-10-05 10:40:33

這是有效的嗎？ [文檔]（https://react-router.now.sh/Match）說''呈現'採取了一個函數，而在你的例子中，你正在傳遞一個組件實例 –

我的壞！更新了答案！ –

嗯，抱歉再次問，但這仍然有效？根據文檔，當您提供組件實例時，「component」採用組件實例*構造函數 –

我結合使用render與定義的方法，像這樣：

class App extends React.Component { 
    childRoute (ChildComponent, match) { 
    return <ChildComponent {...this.props} {...match} /> 
    } 

    render() { 
    <Match pattern='/' render={this.childRoute.bind(this, MyComponent)} /> 
    } 
}

來源

2016-12-01 18:05:17

您每次重新綁定組件調用渲染器的時間。 – Qwerty

的render道具是爲寫行內的比賽，所以你的例子是通過額外的道具的理想方式。

來源

2016-12-03 06:28:53

在這種情況下，最好使用'component'而不是'render'嗎？ – Qwerty

@Qwerty我剛編輯我的答案，刪除該評論。如果你正在使用內聯函數，你還應該使用'render'。用'component'做這件事確實是效率低下的（你將在每次渲染中卸載/安裝一個新組件）。 –

render() { 
    return(
     <Router history={browserHistory}> 
     <div> 
      <Route path="/" render={() => <Header 
      title={"I am Title"} 
      status={"Here is my status"} 
      /> 
      }/> 
       <Route path="/audience" component={Audience}/> 
       <Route path="/speaker" component={Speaker}/> 
     </div> 
     </Router> 
    ); 
}

來源

2017-03-28 18:59:25 Jsun

可能與你的q無關？但在反應路由器4的工作方式來做到這一點。 – Jsun

它看起來像你的評論應該是你的答案的一部分。 – flaviodesousa

是的，在反應路由器v4許多變化，你不會除了會像以前一樣工作。 – Jsun

必須使用render道具，而不是component通過自定義道具，否則只能default Route props傳遞（{match, location, history}）。

我將我的道具傳遞給路由器和子組件。

class App extends Component { 

    render() { 
    const {another} = this.props 
    return <Routes myVariable={2} myBool another={another}/> 
    } 
} 

const Routes = (props) => 
    <Switch> 
    <Route path="/public" render={ (routeProps) => 
     <Public routeProps={routeProps} {...props}/> 
    }/> 
    <Route path="/login" component={Login}/> 
    <PrivateRoute path="/" render={ (routeProps) => 
     ... 
    }/> 
    </Switch>

來源

2017-09-06 10:29:34 Qwerty

我是相當新的反應路由器，並遇到類似的問題。我已經創建了一個基於Documentation的包裝，似乎工作。

// Wrap Component Routes 
function RouteWrapper(props) { 
    const {component: Component, ...opts } = props 

    return (
    <Route {...opts} render={props => (
    <Component {...props} {...opts}/> 
    )}/> 
) 
} 

<RouteWrapper path='/' exact loggedIn anotherValue='blah' component={MyComponent} />

到目前爲止好

來源

2018-02-23 01:19:35 falisse

將道具傳遞給React Router 4中的組件

回答

相關問題