ReactJs Link Not Able To Navigate To Respective Component

I am using “Link” in my component to navigate and pass respective data through props to other component. I have below primary component as AllSuppliers which is using Link to navigate to EditSupplier component.

import React,{useEffect,useState} from 'react'
import axios from 'axios';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { EditSupplier } from "./EditSupplier";
function AllSuppliers() {
    const [suppliers, setstate] = useState([])   
    useEffect(() => {        
        axios.get('http://localhost:62815/api/values/GetAllSuppliers')
            .then(x => {                
                setstate(x.data)            
            }
            )
            .catch(error => {
                alert(error);                
            });;
    },[]);
    return (
        <>
            <table style={{width: '50%'}}>
            <thead>
                <tr>
                <th>
                    Supplier Id
                </th>
                <th>
                    Supplier Name
                </th>
                <th>
                    Edit
                </th>
                </tr>
                </thead>
                
                {                    
                    suppliers.map((supplier)=> {
                        return <tr>
                            <td>
                            {supplier.sup_Id}
                            </td>
                            <td>
                            {supplier.sup_ShortCode}
                            </td>
                            <td>
                            <Router>
                                <Link to={{ pathname: '/EditSupplier', supplierProps: { name: 'bar'} }}>Edit</Link>
                                </Router>
                            </td>

                        </tr>
                    })
                }
               
            </table>
        </>
    )
}

export default AllSuppliers

When Clicked On Edit Link , component not getting navigated. Just browser url is getting changed.

As seen in the image , only browser url is getting changed but cannot see contents from EditSuppliers. Contents in the image are from AllSuppliers component. What could be the cause?

EDIT 1 :-

I tried to wrap my App with Router in App.js as –

import './App.css';
import AllSuppliers from './Components/AllSuppliers'
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function App() {
  return (
    <div className="App">
      <Router>
      <AllSuppliers></AllSuppliers>
      </Router>
    </div>
  );
}

export default App;

I observed the same behavior.

Also I tried wrap Router inside AllSuppliers – before and after <table> </table>

I observed same behavior in this case too.

Edit 2 :-

AllSuppliers.Js



import React,{useEffect,useState} from 'react'
import axios from 'axios';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { EditSupplier } from "./EditSupplier";
function AllSuppliers() {
    const [suppliers, setstate] = useState([])   
    useEffect(() => {        
        axios.get('http://localhost:62815/api/values/GetAllSuppliers')
            .then(x => {                
                setstate(x.data)            
            }
            )
            .catch(error => {
                alert(error);                
            });;
    },[]);
    return (
        <>
     
            <table style={{width: '50%'}}>
            <thead>
                <tr>
                <th>
                    Supplier Id
                </th>
                <th>
                    Supplier Name
                </th>
                <th>
                    Edit
                </th>
                </tr>
                </thead>
                
                {                    
                    suppliers.map((supplier)=> {
                        return <tr>
                            <td>
                            {supplier.sup_Id}
                            </td>
                            <td>
                            {supplier.sup_ShortCode}
                            </td>
                            <td>                            
                                <Link to={{ pathname: '/EditSupplier', supplierProps: { name: 'bar'} }}>Edit</Link>                         
                            </td>
                        </tr>
                    })
                }
               
            </table>
           
        </>
    )
}

export default AllSuppliers

Answer

Issue

You are rendering each link into its own Router context when mapping each supplier.

suppliers.map((supplier)=> {
  return (
    <tr>
      <td>{supplier.sup_Id}</td>
      <td>{supplier.sup_ShortCode}</td>
      <td>
        <Router> // <-- router context
          <Link
            to={{
              pathname: '/EditSupplier',
              supplierProps: {
                name: 'bar',
              },
            }}
          >
            Edit
          </Link>
        </Router>
      </td>
    </tr>
  );
})

The problem here is that each Link will use the routing context of the closest Router above it in the ReactTree, so you’ll see the URL change in the address bar but the Router handling all your application’s routes doesn’t get updated.

You also appear to be missing any sort of actual routing in your app.

function App() {
  return (
    <div className="App">
      <Router>
      <AllSuppliers></AllSuppliers>
      </Router>
    </div>
  );
}

Solution

Remove the extraneous Router components. Just ensure that there is at least one Router wrapping your app to provide the routing context.

suppliers.map((supplier)=> {
  return (
    <tr>
      <td>{supplier.sup_Id}</td>
      <td>{supplier.sup_ShortCode}</td>
      <td>
        <Link
          to={{
            pathname: '/EditSupplier',
            supplierProps: {
              name: 'bar',
            },
          }}
        >
          Edit
        </Link>
      </td>
    </tr>
  );
})

Define the routes for your app to render.

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/EditSupplier" component={EditSupplier} />
          <Route path="/" component={AllSuppliers} />
        </Switch>
      </Router>
    </div>
  );
}