[Solved]-React Router is not working fine with Exact and Switch-Reactjs

The problem is that /items/edit assumes edit as the :id. You need to change the routes like this:

<Route exact path="/items/:id" component={ItemPage} />
<Route exact path="/items/:id/edit" component={EditPage} />

So, You can add other routes like this beautifully. I've provided a sandbox example for you. Click to view Sandbox

Screenshots:

P.S: if you insist not to provide id for edit page, You need to change your routes completely. For example like this:

<Route exact path="/item/:id" component={ItemPage} />
<Route exact path="/items/edit" component={EditPage} />

You just type const two times on the item page. It is working fine on my hand. And you just have to change the position of the below routes

   <Route exact  path="/items/edit" component={EditPage} />      
      <Route exact path="/items/:id" component={ItemPage} />



    // Relative imports
        import React from 'react';
        import ReactDOM from 'react-dom';
        import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
        
        // Absolute imports
        import YourReactComp from './YourReactComp.jsx';
        
        const root = document.getElementById('root');
        
        const MainPage= () => (
          <div>Main Page</div>
        );
        
        
        const  ItemPage= () => (
          <div>Item Page</div>
        );
        
        const EditPage= () => (
          <div>Edit Page</div>
        );
        
        const NoMatch = () => (
          <p>No Match</p>
        );
        
        const RoutedApp = () => (
           <BrowserRouter >
    <Switch>
      <Route exact  path="/items/edit" component={EditPage} />      
      <Route exact path="/items/:id" component={ItemPage} />
      <Route path="/yourReactComp" component={YourReactComp} />        
      <Route path="*" component={NoMatch} />          
    </Switch>
  </BrowserRouter>
        );
        
        ReactDOM.render(<RoutedApp />, root);