Pass props in Link react-router

I am using react with react-router.
I am trying to pass property’s in a "Link" of 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(
      
        Create Idea
        
      
    );
  }
});

var routes = (
  
    
    
  
);

Router.run(routes, function(Handler) {

  React.render(, document.getElementById('main'))
});

The "Link" renders the page but does not pass the property to the new view.
Below is the view code

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(
      
        Create Post: 
        
        
      
    );
  }
});

module.exports = CreateIdeaView;

How can I pass data using "Link"?

This line is missing path:

Should be:

Given the following Link (outdated v1):

Create Idea

Up to date as of v4/v5:

const backUrl = '/some/other/value'
// this.props.testvalue === "hello"

// Using query

// Using search

and in the withRouter(CreateIdeaView) components render(), out dated usage of withRouter higher order component:

console.log(this.props.match.params.testvalue, this.props.location.query.backurl)
// output
hello /some/other/value

And in a functional components using the useParams and useLocation hooks:

const CreatedIdeaView = () => {
    const { testvalue } = useParams();
    const { query, search } = useLocation(); 
    console.log(testvalue, query.backUrl, new URLSearchParams(search).get('backUrl'))
    return {testvalue} {backurl}    
}

From the link that you posted on the docs, towards the bottom of the page:

Given a route like `

Updated code example with some stubbed query examples:



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

{this.state.fromIdeas}
thing:
{location.query
&& location.query.thing}


another1:
{location.query
&& location.query.another1
|| 'none for 2 or 3'}


);
}
}

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 (

• item: {this.state.fromAppItem.okay}

• id: {this.state.fromAppId}

-

Home 1



-
this.setState({
nextPage: 'world2',
showWorld2: true})}>
switch 2


{this.state.showWorld2
&&

-

Home 2


}
Home 3

);
}
}

class App extends React.Component {
render() {
return (

Ideas





);
}
}

ReactDOM.render((



), document.getElementById('ideas'));






#updates:

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

From the upgrade guide from 1.x to 2.x:

, onEnter, and isActive use location descriptors

` can now take a location descriptor in addition to strings.
The query and state props are deprecated.

// v1.0.x

// v2.0.0

// Still valid in 2.x

Likewise, redirecting from an onEnter hook now also uses a location
descriptor.

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

For custom link-like components, the same applies for router.isActive,
previously history.isActive.

// v1.0.x

history.isActive(pathname, query, indexOnly)

// v2.0.0

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

#updates for v3 to v4:

-
https://github.com/ReactTraining/react-router/blob/432dc9cf2344c772ab9f6379998aa7d74c1d43de/packages/react-router/docs/guides/migrating.md

-
https://github.com/ReactTraining/react-router/pull/3803

-
https://github.com/ReactTraining/react-router/pull/3669

-
https://github.com/ReactTraining/react-router/pull/3430

-
https://github.com/ReactTraining/react-router/pull/3443

-
https://github.com/ReactTraining/react-router/pull/3803

-
https://github.com/ReactTraining/react-router/pull/3636

-
https://github.com/ReactTraining/react-router/pull/3397

-
https://github.com/ReactTraining/react-router/pull/3288

The interface is basically still the same as v2, best to look at the CHANGES.md for react-router, as that is where the updates are.

"legacy migration documentation" for posterity

• https://github.com/ReactTraining/react-router/blob/dc7facf205f9ee43cebea9fab710dce036d04f04/packages/react-router/docs/guides/migrating.md

• https://github.com/ReactTraining/react-router/blob/0c6d51cd6639aff8a84b11d89e27887b3558ed8a/upgrade-guides/v1.0.0.md

• https://github.com/ReactTrai

Stack Overflow Q#30115324, score: 199