title: Redirecting after deleting page / route in React and Redux
body: <p>As practice using react, react-router, and redux, I am making a very small app that has two models: vacuums and stores. In my app you can see all vacuums, all stores, a single vacuum or a single store. You can add and delete instances of vacuums and stores form the single page view. </p>
  
  <p>The problem I am having is that after deleting a vacuum or store, my app breaks because the route no longer exists.</p>
  
  <p>I tried adding a NotFound component and route but because I am using variables inside of routes (/vacuums/:id), it does get there.</p>
  
  <pre><code>&lt;Switch&gt;
     &lt;Route exact path="/stores" component={Allstores} /&gt;
     &lt;Route exact path="/stores/add" component={storesAddForm} /&gt;
     &lt;Route exact path="/stores/:storeId" component={Singlestores} /&gt;
     &lt;Route exact path="/vacuums" component={Allvacuums} /&gt;
     &lt;Route exact path="/vacuums/add" component={vacuumsAddForm} /&gt;
     &lt;Route exact path="/vacuums/:vacuumsId" component={Singlevacuums} /&gt;
     &lt;Route component={NotFound} /&gt;
  &lt;/Switch&gt;
  </code></pre>
  
  <p>Delete function using redux:</p>
  
  <pre><code>export const REMOVE_VACUUM = 'REMOVE_VACUUM';
  
  export const removeVacuum = vacuumId =&gt; {
    return {
      type: REMOVE_VACUUM,
      vacuumId: vacuumId,
    };
  };
  
  const deleteVacuum = id =&gt; {
      return async (dispatch, getState) =&gt; {
         const deleted = await axios.delete(`/api/allVacuums/${id}`);
         dispatch(removeVacuum(id));
      };
  };
  
  const rootReducer = (state = initialState, action) =&gt; {
        switch (action.type) {
          case REMOVE_VACUUM:
               const arr = state.vacuums.filter(
                     vacuum =&gt; vacuum.id !== action.vacuumId
                     );
               return { ...state, vacuums: arr };
        }
  }
  </code></pre>