I have routes defined like following:
<Route path="auth">
<Route path="confirm-code" component={this.getIndexRoute()} email="xyz#gmail.com" code="1234" />
</Route>
getIndexRoute() gives me a component to navigate to. When I hit http://localhost:3000/de/auth/confirm-code/ it works.
However, I want to modify this path to be like http://localhost:3000/de/auth/confirm-code/email=someEmail&code=someCode
I would then want to pass those received email and code as props to my component so that I can process them there. right now I am hard-coding email="xyz#gmail.com" and code=1234. I would like to extract them from the url.
How to do it?
All query params (email, code) are automatically passed to the component via props.location - or depending on which router version you are using you can use withRouter
react-router getting this.props.location in child components
Related
I have component with a button. I'd like a component to open another component in the new URL when the button is pressed. I don't want other components on the new page. I also want to pass data to a new component.
UPDATE:
<BrowserRouter>
<Link onClick={this.getData.bind(this)} to={{ pathname: "/test", data: this.state.data }}>Begin</Link>
<Switch>
<Route exact path="/test" component={Test} />
</Switch>
</BrowserRouter>
I wrote some code, but I have 2 problems:
How can I fetch data before route?
My component "Test" render on this page with previous components, I want only "Test" component on page
Please see react-router-dom for page to page navigation and passing data from one page to another.
You can use switch from react router dom along with routes. Please see documentation you will get to know about it.
I have simple app with react-router v5. In App component I have switch like this:
<Switch>
<Route path="/post">
<Post />
</Route>
<Route path="*">
<Error />
</Route>
</Switch>
In other component I have Link with path like this:
<Link to={{ pathname: `/post?id=${message.id}`, state: { message } }}>text</Link>
Now, Error component is only logging the pathname and state from useLocation() hook, Post component is showing pathname in HTML tag.
When I click the link, the component that is rendered, is 'Error', it console.log correct path name ('.post?id=123'), and it logs correct state. Address in browser is correct, but Post component is not rendered. When I refresh browser, then correct component is rendered. I mean when i refresh being on post?id=123, then 'Post' is rendered, but when I try to click link directing to 'post?id=123', 'Error' is rendered. If I use <Link to={/post?id=${message.id} /> without state, routing is working fine.
Here's codesanbox, it seems the issue is this part: to={{pathname: '/post?id=${message.id}, state: {message}}, when I remove ?id=${...} it works fine. But still I would like to have this id there.
It seems I shouldn't use query string when using object as 'to' parameter. If someone needs to include query string, there is search parameter in 'to' object.
I have a React route like code below:
<Route path='/settings' component={Settings} />
And inside Settings component, it has 3 nested routes:
<Route path='/settings/general' component={GeneralSetting} />
<Route path='/settings/team' component={TeamSetting} />
<Route path='/settings/email' component={EmailSetting} />
So my question is how can I get the nested pathname at most right position (such as '/general', '/email') only without the parent route ('/settings'). Currently, I'm using string splitter on location pathname (/settings/general) to achieve this. Are there any best practice for this situation?
I appreciate any help. Thanks in advance.
IMO, there are no best practice to get child path in react router. You are using string splitter on location which is fine though.
If you still need to get child path only you can use params in url instead and render component on based of params like below
<Route path='/settings/:type' component={Type} />
In Type (new component to render child) component you can get params like below
this.props.match.params.type
that will give you general , team and email value based on your url.
I have something like this:
<Route path="/route/:param" component={DealContainer} />
Then while the component is mounted I am doing a client side redirect:
componentWillMount() {
if (this.props.match.params.param != 'desired_one') {
this.props.history.push('/route/desired_one');
Despite the fact that the url changes the component is not remounted...
Any ideas?
You should resolve this issue by using the Redirect component inside "react-router-dom" package
<Route exact path="/route" component={DealContainer} />
<Route
exact
path="/route/desired"
render={() => <Redirect to="/route/desiredRedirectLocation" />}
/>
<Route path="/route/:param" component={DealContainer} />
This implementation should:
Match the exact base route correctly, without matching any props. Lets say that you want to show a list of items (e.g. /products)
Match the desired item to be redirected (e.g. products/car) and redirect it to the desired location, let's say products/horse
Match any other case that you don't want to redirect /products/:id and correctly take the prop you are after inside the match object.
Explanation
The problem with history.push, is that React will figure out you are using the same component, and will only update the differences, without actually re-mounting the component, which is already mounted.
My example with redirect on the other hand, will intercept the route you want to redirect without mounting the component first, so component will be mounted after the redirect happened, correctly executing the action that you need.
I'm struggling to do anything with react/redux.
One of my last challenges was to pass some data from Child Component to Parent Component. I couldn't get the child props by calling parentComponent.props.children.props (I also tried converting children to Array with React.Children.toArray) and then I found a solution for my specific problem reading some data that comes with React Router.
I managed to find out the child component by calling this.props.location.pathname in Parent Component.
I have a Routing structure as following
<Router history={history}>
<Route path="/main" component={Main}>
<Route path="something" component={Something} />
</Route>
</Router>
I wonder if it is possible to pass some data to Main in this declaration. Something like:
<Route path="something" component={Something} data={foo: 'myData'} />
And get foo in the Main.render
Is there something close to this?
You could pass 'myData' as a query parameter. This is my personal preference for passing props to a component using React Router. Then when you browse to /main/something?foo=myData, you can access foo from this.props.location.query.foo.
Any props you pass to the route definition is accessible under the route node in the props. In your Something component, should be able to get the data prop with this.props.route.data