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
Related
I’m using the last release of React Router and I want to know what is the best solution to show different component that are nested in a parent component.
I’ll try to explain myself better.
I have a route R with path /r1.
This route loads component A.
Component A has inside others 3 components B, C and D that I should show in the same page with component A only when the user press a specific button in component A.
So I want to be able to add a description in route R to manage this. For example to show component B the router could be /r1/b.
Now I did this with a state variable inside component A but I think should be better if I can use some React Router property.
Thanks
You can create nested routes component, and it will manage nested routes.
export default function NestedRoutes() {
return (
<Switch>
<Redirect exact from={"/r1"} to={`/r1/A`} />
<Route path={`/r1/A`}>
<ComponentA />
</Route>
<Route path={`/r1/B`}>
<ComponentB />
</Route>
// Or to some not found component
<Redirect to="/r1/A" />
</Switch>
);
}
I'm using Switch with my route entries. The problem was that I didn't know how to render a component that I wanted to pass by props to another component.
I added a prop component to my parent component A and in my route I wrote something like this:
<Route path="/r1/hub/A" render={() => <A /> //this render only A
<Route path="/r1/hub/A/B" render={() => <A component={B} /> //this render A with B
In component A I used React.createElement to render component B with others properties that component A has to inject.
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 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
My app index start with:
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Main} />
<Route path="/search" component={MovieSearch} />
<Route path="/movies" component={MovieList} />
</Route>
</Router>
</Provider>,
document.getElementById('root')
);
My Main.js:
render() { return (<div>{this.props.children}</div> )}
When I access URI: /movies MovieList props stay undefined until I connect the component to the store. Is this correct? I need to connect every component to the store to access state? I can't get props from Main parent props without this?
I really need to call mapStateToProps and sometimes mapDispatchToProps to access state and actions ?
This is the default/good practice?
The answer is, Yes
Unless you have a layout component, you need to connect each component to work with redux.
You can take a look at one of my project. I used page.js as my router. It is very simple and solves my purpose. For every route, I pass the name of the component to be rendered. So, a layout page will be loaded where I connect redux and pass the state as props to the child components. And based on the render passed by the router. I will render the component inside the layout.
Using layout is a very good practice. It becomes a common place where all your components gets rendered.
Useful links:
mapStateToProps in Redux
[Update]
You should also take a look at Redux Router
In react router is there a way to have child routes but not display the parent component? I'm trying to display breadcrumbs in my application so I switched to having child routes but I don't want to display the parent component in the way of a 'master/detail' type layout. I just want the child component displayed as if it were navigated to by itself but it seems if you don't include {this.props.children} somewhere in the parent component then then child component never gets rendered.
One hack I've tried is seeing if this.props.children is populated and not displaying the rest of the page in render like
if(this.props.children) {
return (this.props.children)
} else {
return /**rest of render method**/
}
but this feels like a bad solution.
I'm having trouble understanding exactly what you're trying to do, but it seems <IndexRoute> could help you, since that lets you distinguish what you do at /portal vs. /portal/feature
<Route path="/portal" component={ComponentContainingBreadcrumbs}>
<IndexRoute component={ComponentWithRestofRenderMethodFromYourExample} />
<Route path="child1" component={Child1} />
<Route path="child2" component={Child2} />
</Route>