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