react-router cannot read location of undefined

Question

I'm trying to pass some values from one component to another using query strings.

This is the component I'm passing values from (shortened):

export class Button extends React.Component {

constructor(props) {
    super(props);
    this.state = {title : "some title"};
}
render() {
    return(
        <Button type="submit" color="primary">
             <Link to="/Template_Main" query={{title: this.state.title}}>Save</Link>
        </Button>
    );
}
}

This is how I'm trying to get the value in my other component:

const title = this.props.location.query;

This is my router:

import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    browserHistory
} from 'react-router-dom';
import Home from './Main';
import TimelineTemplate from './Template_Main';


const App = () => 
    <Router history={browserHistory}>
        <div>
        <Route exact path="/" component={Home}/>
        <Route path="/Template_Main/:title" component={TimelineTemplate} />
        </Route>
       </div>
    </Router>

export default App

So, for clarification: I shortened my code to show only what's important. In my Button-component (I chose the name for this post, it has a different name in my actual code), there is also a form in which you can enter a title. When clicking on the button, you are redirected to Template_Main. I want to display the value of title in Template_Main and wanted to pass the value using a query string. However, I'm making a few mistakes somewhere. For one, Template_Main is displayed as blank, when I add :title to path="/Template_Main/:title in the Router. When entering a sub-route, like so:

<Route path="/Template_Main" component={TimelineTemplate}>
    <Route path="/Template_Main/:title"/>
</ Route>

I am redirected, however, then I receive the error message that "location" of undefined cannot be read. I read that I need to pass history to <Router>, which I tried and which also failed since I received the error message that there was no property browserHistory in react-router-dom. Apparently there is no such thing in v4.0.0, so I tried to downgrade to 3.0.0 and then to 2.0.0 using npm install [email protected], however, I still received the same error message.

I have been researching this for a few hours now and at this point I'm not really sure about what to do.

Did I make any mistakes, either in my code or in how I tried to solve the issue (I tried to describe my course of action as clearly as possible) and do you guy have any ideas about how to solve it?

raksheetbhat · Accepted Answer · 2017-12-18 13:16:35Z

2

location.query seems to have been discontinued in React router v4. You can try a location.search, props.location.pathname or props.match.params instead.

Here is a github issue for the same problem.

Here is a code example:

export class Button extends React.Component {

constructor(props) {
    super(props);
    this.state = {title : "some title"};
}
render() {
    return(
        <Button type="submit" color="primary">
             <Link to={"/Template_Main/"+this.state.title}>Save</Link>
        </Button>
    );
}
}

and the child component:

import { withRouter } from 'react-router-dom';

class Child extends React.Component {
   render(){
      return <div>{this.props.match.params.title}</div>
   }
}

export default withRouter(Child);

Router definition should be as follows:

<Route path="/Template_Main/:title" component={TimelineTemplate} />

Hope it helps.

PS: I am yet to figure out how to pass multiple parameters using this method. If I figure it out, I'll update this answer in the future.

edited Dec 18, 2017 at 13:16

answered Dec 18, 2017 at 12:21

raksheetbhat

1,0002 gold badges13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

A.S.J Over a year ago

thank you very much for your reply! I adapted my own code and changed it the way you suggested, however, I'm still not sure about how to reference title in my child component, where I want to display it. I used {this.props.match.params.title} but it didn't work and did not return anything. Do you have any suggestion regarding how to do that?

raksheetbhat Over a year ago

Okay. Just noticed your Route definition. There seems to be a small syntax error. I'll update my answer with the correct syntax.

A.S.J Over a year ago

oh also, I passed multiple parameters doing this: <Link to={"/Template_Main?title="+this.state.title+"&subtitle="+this.state.subtitle}>Save</Link> don't know if it's the right way but it works for me

A.S.J Over a year ago

stackoverflow.com/questions/42862253/… okay I figured it out using this answer (if anyone else, who stumbles across this question, struggles with this.) @Raksheet Bhat thank you very much for your help!

Collectives™ on Stack Overflow

react-router cannot read location of undefined

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related