I am new to react js and I am trying to do page navigation with react-router-dom and I could not load the page even after trying many times.

index.js

import React from "react";
import ReactDOM from 'react-dom';
 
import 'bootstrap/dist/css/bootstrap.css';
import { App } from './App' 
const element=  <App />;
ReactDOM.render(element, document.getElementById('root'));

App.js

import React from 'react' 
import {Route, BrowserRouter as Router, Link} from 'react-router-dom';
import Home from './components/Home';
import Hello from './components/Hello';
export function App()
{
    return(
        <div>
        <Router> 
             <div className='container'>
                <div className='navbar-header'>
                    <ul className='nav navbar-nav'>
                        <li> <Link to={'./components/Home'}>Home</Link> </li>
                        <li><Link to={'./components/Hello'}>Hello</Link></li>
                    </ul>
                </div>
            </div>                           
        </ Router>
        </div>

    );
}

src/components/Home.jsx

In Home.jsx, I am trying to get data from API and that page works fine.

Thanks.

>Solution :

You are using react router wrong way. Link is just Router’s implementation of <a> tag… it just change your url and redirect your youter.. you need to specify Route which should be displayed:

export function App()
{
    return(
        <div>
        <Router> 
             <div className='container'>
                <div className='navbar-header'>
                    <ul className='nav navbar-nav'>
                        <li> <Link to={'/'}>Home</Link> </li>
                        <li><Link to={'/hello'}>Hello</Link></li>
                    </ul>
                </div>
            </div> 
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/hello" component={Hello} />
</Switch>                          
        </ Router>
        </div>

    );
}