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 react-router@x.x.x
, 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?