score:9

Accepted answer

There are a couple of solution to your problem without actually using a state management library,

First: Lift the state up,

This is the most correct solution since your components and routes are not highly nested and the data needs to handled by the components which are siblings of each other,

class Root extends React.Component {
    state = {
       restaurant: [] // store the restaurant data here instead of MyFoodApp
    }
    restaurantUpdater = () => {
        //utility function to update state
    }
    render() {
        return (
            <Router>
                <div className="router">
                    <Switch>
                        <Route exact path="/" render={props => <MyFoodApp {...props} restaurant={this.state.data} restaurantUpdater={this.restaurantUpdater} />} />
                        <Route
                            path="/restaurant/:slug"
                            render={props => <RestaurantPage {...props} restaurant={this.state.data} restaurantUpdater={this.restaurantUpdater} />}
                        />
                        <Route render={(props) => <NotFound {...props}/>} />
                    </Switch>
                </div>
            </Router>
        );
    }
}

Second: Make use of Context API

You can make use of Context when your data needs to be passed down to components at different levels. As the react docs say

Don’t use context just to avoid passing props a few levels down. Stick to cases where the same data needs to be accessed in many components at multiple levels.

You can configure the use of context using React 16.3 context API like

export const RestaurantContext = React.createContext({
  restaurant: [],
  restaurantUpdater: () => {},
});

class RestaurantProvider extends React.Component {
   state = {
       restaurant: [] // store the restaurant data here instead of MyFoodApp
    }
    restaurantUpdater = () => {
        //utility function to update state
    }
   render() {
      <RestaurantContext.Provider value={this.state}>
        {this.props.children}
      </RestaurantContext.Provider>
   }
}

and then create an HOC for the consumer

import RestaurantContext from 'path/to/restaurantContext'
const withContext = (Component) => {
    return (props) => <RestaurantContext.Consumer>
        {(restaurant, restaurantUpdater) => <Component {...props} restaurant={restaurant} restaurantUpdater={restaurantUpdater} />}
    </RestaurantContext.Consumer>
}

Now you can use it in the component like

export default withContext(MyFoodApp);

and your FoodApp can use restaurant and restaurantUpdater from props like

const { restaurant, restaurantUpdater} = this.props

similarly you can use it in the other components

score:0

Solution to your answer is to create sub routing to make a sub routing from your MyFoodApp component to RestaurantPage component.

Inside MyFoodApp 's render methode *Note: Don't use switch again inside route <Switch> <Route exact path="/restaurant" render={() => <RestaurantPage pages={this.arrayOfRestaurant}/> </Switch>

I hope it would help

score:1

You could manage data without redux if either of the scenarios matched your arrangement of components:

  1. Parent to child relationship: Using Props
  2. Child to parent relationship: Using callbacks
  3. Siblings with a common parent.

But neither of the relationships satisfies your arrangement of the components since the two components are new root components.

When the components can't communicate between any sort of parent-child relationship, the documentation recommends setting up a global event system.


Related Query

More Query from same tag