search

bradstiff / react-app-location

A package to avoid repetition with Routes and URLs, and reduce boilerplate with location param parsing in React Apps
MIT License
97 stars 8 forks source link

Add routeProps param to Location.toRoute() #7

Open Konstantinov-Innokentii opened 5 years ago

Konstantinov-Innokentii commented 5 years ago

In case, when location objects and matching components are stored in array of objects like this: let routes = [{location: Location, component: Component}, ...]

and used in this way:

<Switch location={createLocation(this.props.window.path+this.props.window.search)}>
    {routes.map(r => r.location.toRoute({
        render: (props) => <r.component {...props} />,
        invalid: NotFound,
    }))}
</Switch>

I get Warning "Each child in an array or iterator should have a unique "key" prop". To avoid it I should pass key prop to Route. For this purpose I added routeProps param to Location.toRoute(). Usage is: 

<Switch location={createLocation(this.props.window.path+this.props.window.search)}>
    {routes.map(r => r.location.toRoute({
        render: (props) => <r.component {...props}/>,
        invalid: NotFound,
    },  true, {key: this.props.uuid}, false, false))}
</Switch>
ptrobert commented 5 years ago

In case, when location objects and matching components are stored in array of objects like this: let routes = [{location: Location, component: Component}, ...]

and used in this way:

<Switch location={createLocation(this.props.window.path+this.props.window.search)}>
    {routes.map(r => r.location.toRoute({
        render: (props) => <r.component {...props} />,
        invalid: NotFound,
    }))}
</Switch>

I get Warning "Each child in an array or iterator should have a unique "key" prop". To avoid it I should pass key prop to Route. For this purpose I added routeProps param to Location.toRoute(). Usage is:

<Switch location={createLocation(this.props.window.path+this.props.window.search)}>
    {routes.map(r => r.location.toRoute({
        render: (props) => <r.component {...props}/>,
        invalid: NotFound,
    },  true, {key: this.props.uuid}, false, false))}
</Switch>

Facing the same issue, Please merge this quickly