ReactJS: Parametr przechodzą z szyn reagują routera do składnika

Question

ja próbuje przekazać wartości z funkcję renderowania składowej:

= react_component('App', props: {test: 'abc'}, prerender: false) 

Routes.jsx

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

App.jsx (komponent)

class App extends React.Component { 
    render() { 
    return (
     <Header test={this.props.test}> 
     </Header> 
     {this.props.children} 
     <Footer /> 
    ); 
    } 
} 

App.propTypes = { test: PropTypes.string }; 

Nie wydaje się być spójną odpowiedzią na ten pełny przepływ.

Próbowałem następujące:

<Route path="/" component={() => (<App myProp="value" />)}/> 

Ale to nadal nie jest odpowiedź na pytanie o podniesienie wartości dostarczonego przez inicjału renderowanie połączeń (react_component)

Answer 1

Patrząc na zakończenie odpowiedź na koniec jak przekazać parametr z „widokiem” do „router” reagować na „składnik”

Będziemy Zaczynamy od widoku:

<%= react_component('MyRoute', {test: 123}, prerender: false) %> 

Teraz będziemy tworzyć składnik, który posiada nasz route:

class MyRoute extends Component{ 
    constructor(props){ 
    super(props) 
    } 
    render(){ 
    return(
     <Switch> 
     <Route path="/" render={() => <App test={this.props.test} />} /> 
     <Route path="/login" component={Login} /> 
     </Switch> 
    ) 
    } 
} 

Jak widać, mijaliśmy test rekwizyt z komponentu Route składnikowi App. Teraz możemy użyć test rekwizyt w App części:

class App extends Component{ 
    constructor(props){ 
    super(props) 
    } 
    render(){ 
    return(
     <h1>{this.props.test}</h1> 
    ) 
    } 
} 

Answer 2

<Route path="/" render={attr => <App {...attr} test="abc" />} /> 

Answer 3

router v3 byś zrobić coś takiego

Owiń komponent aplikacji pod withRouter tak

import { withRouter } from 'react-router'; 

class App extends React.Component { 
    render() { 
    return (
     <Header test={this.props.test}> 
     </Header> 
     { 
     this.props.children && 
     React.clone(this.props.children, {...this.props})} 
     <Footer /> 
    ); 
    } 
} 
App.propTypes = { test: PropTypes.string }; 
export const APP = withRouter(App); 

I skonstruuj takie trasy ...

<Route path="/" component={APP}> 
    <Route path="/lobby" component={Lobby} /> 
    <Route path="/map" component={GameMap} /> 
    ... 
</Route> 

Twoje trasy dla dzieci będą renderowane we właściwościach APP dla dzieci, a rekwizyty zostaną im przekazane.

Mam nadzieję, że to pomoże!