javascript - open - react js change title

Pasando props al componente en React Router 4

Question

Soy nuevo en react-router y acabo de comenzar a escribir una aplicación usando react-router V4. Me gustaría pasar los apoyos a los componentes presentados por <Match /> y me pregunto cuál es la forma "mejor" o "adecuada" de hacerlo.

¿Es por hacer algo como esto?

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

¿Es esto (pasar props a los componentes a ser renderizados por <Match /> ) incluso una buena práctica para hacerlo con react-router o es un antipatrón o algo así; Y si es así, ¿por qué?

Answer 1

Debe usar la prop de render lugar del component para pasar los props personalizados, de lo contrario solo se pasan los props de Route predeterminados ( {match, location, history} ).

Paso mis accesorios al enrutador y los componentes secundarios como tal.

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>

Answer 2

El objeto de render está diseñado para escribir coincidencias en línea, por lo que su ejemplo es la forma ideal de pasar objetos adicionales.

Answer 3

Lo haré como el siguiente para mejorar la claridad.

const myComponent = <MyComponent myProp={myProp} {...defaultProps} />
<Match pattern="/" component={myComponent} />

Por esto el código de tu router no se desordenará.

Answer 4

Soy bastante nuevo en reaccionar-enrutador y encontré un problema similar. He creado un contenedor basado en la Documentation y eso parece funcionar.

// 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} />

Hasta ahora tan bueno

Answer 5

Utilizo render en combinación con un método definido como este:

class App extends React.Component {
childRoute (ChildComponent, match) {
return <ChildComponent {...this.props} {...match} />
}
render () {
<Match pattern=''/'' render={this.childRoute.bind(this, MyComponent)} />
}
}

Answer 6

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