switch route react link example doom browserrouter javascript reactjs react-router

javascript - doom - router link react example



Pase accesorios en Link react-router (8)

A esta línea le falta la path :

<Route name="ideas" handler={CreateIdeaView} />

Debiera ser:

<Route name="ideas" path="/:testvalue" handler={CreateIdeaView} />

Dado el siguiente Link :

<Link to="ideas" params={{ testvalue: "hello" }}>Create Idea</Link>

Desde el enlace que publicó en los documentos, hacia la parte inferior de la página:

Dada una ruta como <Route name="user" path="/users/:userId"/>


Ejemplo de código actualizado con algunos ejemplos de consulta con trozos:

// import React, {Component, Props, ReactDOM} from ''react''; // import {Route, Switch} from ''react-router''; etc etc // this snippet has it all attached to window since its in browser const { BrowserRouter, Switch, Route, Link, NavLink } = ReactRouterDOM; class World extends React.Component { constructor(props) { super(props); console.dir(props); this.state = { fromIdeas: props.match.params.WORLD || ''unknown'' } } render() { const { match, location} = this.props; return ( <React.Fragment> <h2>{this.state.fromIdeas}</h2> <span>thing: {location.query && location.query.thing} </span><br/> <span>another1: {location.query && location.query.another1 || ''none for 2 or 3''} </span> </React.Fragment> ); } } class Ideas extends React.Component { constructor(props) { super(props); console.dir(props); this.state = { fromAppItem: props.location.item, fromAppId: props.location.id, nextPage: ''world1'', showWorld2: false } } render() { return ( <React.Fragment> <li>item: {this.state.fromAppItem.okay}</li> <li>id: {this.state.fromAppId}</li> <li> <Link to={{ pathname: `/hello/${this.state.nextPage}`, query:{thing: ''asdf'', another1: ''stuff''} }}> Home 1 </Link> </li> <li> <button onClick={() => this.setState({ nextPage: ''world2'', showWorld2: true})}> switch 2 </button> </li> {this.state.showWorld2 && <li> <Link to={{ pathname: `/hello/${this.state.nextPage}`, query:{thing: ''fdsa''}}} > Home 2 </Link> </li> } <NavLink to="/hello">Home 3</NavLink> </React.Fragment> ); } } class App extends React.Component { render() { return ( <React.Fragment> <Link to={{ pathname:''/ideas/:id'', id: 222, item: { okay: 123 }}}>Ideas</Link> <Switch> <Route exact path=''/ideas/:id/'' component={Ideas}/> <Route path=''/hello/:WORLD?/:thing?'' component={World}/> </Switch> </React.Fragment> ); } } ReactDOM.render(( <BrowserRouter> <App /> </BrowserRouter> ), document.getElementById(''ideas''));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.3.1/react-router-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.3.1/react-router.min.js"></script> <div id="ideas"></div>

actualizaciones:

Ver: https://github.com/ReactTraining/react-router/blob/0c6d51cd6639aff8a84b11d89e27887b3558ed8a/upgrade-guides/v2.0.0.md#link-to-onenter-and-isactive-use-location-descriptors

De la guía de actualización de 1.xa 2.x:

<Link to> , onEnter e isActive usan descriptores de ubicación

<Link to> ahora puede tomar un descriptor de ubicación además de cadenas. La consulta y los accesorios de estado están en desuso.

// v1.0.x

<Link to="/foo" query={{ the: ''query'' }}/>

// v2.0.0

<Link to={{ pathname: ''/foo'', query: { the: ''query'' } }}/>

// Sigue siendo válido en 2.x

<Link to="/foo"/>

Del mismo modo, la redirección desde un enlace onEnter ahora también usa un descriptor de ubicación.

// v1.0.x

(nextState, replaceState) => replaceState(null, ''/foo'') (nextState, replaceState) => replaceState(null, ''/foo'', { the: ''query'' })

// v2.0.0

(nextState, replace) => replace(''/foo'') (nextState, replace) => replace({ pathname: ''/foo'', query: { the: ''query'' } })

Para componentes personalizados tipo enlace, lo mismo se aplica para router.isActive, anteriormente history.isActive.

// v1.0.x

history.isActive(pathname, query, indexOnly)

// v2.0.0

router.isActive({ pathname, query }, indexOnly)

actualizaciones para v3 a v4:

"documentación de migración heredada" para la posteridad

Estoy usando reaccionar con react-router. Estoy tratando de pasar la propiedad en un "Enlace" de react-router

var React = require(''react''); var Router = require(''react-router''); var CreateIdeaView = require(''./components/createIdeaView.jsx''); var Link = Router.Link; var Route = Router.Route; var DefaultRoute = Router.DefaultRoute; var RouteHandler = Router.RouteHandler; var App = React.createClass({ render : function(){ return( <div> <Link to="ideas" params={{ testvalue: "hello" }}>Create Idea</Link> <RouteHandler/> </div> ); } }); var routes = ( <Route name="app" path="/" handler={App}> <Route name="ideas" handler={CreateIdeaView} /> <DefaultRoute handler={Home} /> </Route> ); Router.run(routes, function(Handler) { React.render(<Handler />, document.getElementById(''main'')) });

El "Enlace" representa la página pero no pasa la propiedad a la nueva vista. A continuación se muestra el código de vista

var React = require(''react''); var Router = require(''react-router''); var CreateIdeaView = React.createClass({ render : function(){ console.log(''props form link'',this.props,this)//props not recived return( <div> <h1>Create Post: </h1> <input type=''text'' ref=''newIdeaTitle'' placeholder=''title''></input> <input type=''text'' ref=''newIdeaBody'' placeholder=''body''></input> </div> ); } }); module.exports = CreateIdeaView;

¿Cómo puedo pasar datos usando "Link"?

Hay una manera de pasar más de un parámetro. Puede pasar "a" como objeto en lugar de cadena.

// your route setup <Route path="/category/:catId" component={Category} / > // your link creation const newTo = { pathname: "/category/595212758daa6810cbba4104", param1: "Par1" }; // link to the "location" // see (https://reacttraining.com/react-router/web/api/location) <Link to={newTo}> </Link> // In your Category Component, you can access the data like this this.props.match.params.catId // this is 595212758daa6810cbba4104 this.props.location.param1 // this is Par1

Para resolver la respuesta anterior ( https://.com/a/44860918/2011818 ), también puede enviar los objetos en línea "A" dentro del objeto Enlace.

<Link to={{ pathname: "/product-detail", productdetailProps: { productdetail: "I M passed From Props" } }}> Click To Pass Props </Link>

Ruta:

componentDidMount() { console.log("product props is", this.props.location.productdetailProps); }

Y luego puede acceder a los parámetros en su componente PageCustomer de esta manera: this.props.match.params.id .

Por ejemplo, una llamada a la API en el componente PageCustomer:

axios({ method: ''get'', url: ''/api/customers/'' + this.props.match.params.id, data: {}, headers: {''X-Requested-With'': ''XMLHttpRequest''} })

Tuve el mismo problema para mostrar los detalles de un usuario de mi aplicación.

Puedes hacerlo:

<Link to={''/ideas/''+this.props.testvalue }>Create Idea</Link>

o

<Link to="ideas/hello">Create Idea</Link>

y

<Route name="ideas/:value" handler={CreateIdeaView} />

para obtener esto a través de this.props.match.params.value en su clase CreateIdeaView.

Puedes ver este video que me ayudó mucho: https://www.youtube.com/watch?v=ZBxMljq9GSE

en cuanto a react-router-dom 4.xx ( https://www.npmjs.com/package/react-router-dom ) puede pasar parámetros al componente para enrutar a través de:

<Route path="/ideas/:value" component ={CreateIdeaView} />

vinculación a través (teniendo en cuenta que el valor testValue se pasa al componente correspondiente (por ejemplo, el componente de la aplicación anterior) que representa el enlace)

<Link to={`/ideas/${ this.props.testValue }`}>Create Idea</Link>

pasando accesorios a su constructor de componentes, el valor param estará disponible a través de

props.match.params.value

<Route state={this.state} exact path="/customers/:id" render={(props) => <PageCustomer {...props} state={this.state} />} />

y otro extremo donde se redirige la ruta, haga esto

axios({ method: ''get'', url: ''/api/customers/'' + this.props.match.params.id, data: {}, headers: {''X-Requested-With'': ''XMLHttpRequest''} })