React - Navbar not showing and I am getting a Blank Screen-CodePudding

I am trying to create a Navbar on a clean React app (with React-Router-Dom) and for some reason I am just getting a blank screen, as far as I can see and from looking up various guides, it should be fine:

App.js:

import React from "react";
import Navbar from "./components/Navbar";

function App() {
  return (

  <Navbar/>
   
  );
}

export default App;

Index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  
    
  </React.StrictMode>,
  document.getElementById('root')
);

Navbar.js

import React from "react";
import {  Link } from "react-router-dom";

const Navbar = ()=>{
    return(
        <nav className = "nav-wrapper">
            <div className="container">
                <Link to="/" className="brand-logo">Potter Books</Link>

                <ul className="right">
                    <li><Link to="/">Shop</Link></li>
                    <li><Link to="/">Cart</Link></li>
                </ul>
            </div>


        </nav>

    );
}


export default Navbar;

CodePudding user response：

There are multiple ways to fix that. What I mostly like to use BrowserRouter into the App.js

modify your app.js file by importing BrowserRouter

import {
  BrowserRouter,
} from "react-router-dom";

And then add this in the App function.

function App() {
  return (
   <BrowserRouter> 
      <Navbar/>
   <BrowserRouter/>
  );
}

export default App;

For more information, you can consult this page as well.

CodePudding user response：

So to fix this you need to add

import {BrowserRouter as Router} from "react-router-dom";

into Index.js