React-JS I keep getting a blank screen. Please help me-CodePudding

Was following a tutorial and my localhost is completely blank after importing {Link} from react-router-dom. Followed word for word but my local host is blank as soon as I added link in navbar.js. Please help.

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

function Navbar() {
    return(
        <nav >
                <div >
            
                <Link to="/" >SkyCloud</Link>

                <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span ></span>
                </button>

                <div  id="navbarSupportedContent">
                    <ul >
                    <li >
                        <Link to="/" >Home</Link>
                    </li>

                    <li >
                    <Link to="/about" >About</Link>
                    </li>

                    <li >
                    <Link to="/contact" >Contact</Link>
                    </li>

                    </ul>
                    
                </div>
                </div>
      </nav>  

    );




}

export default Navbar;

And this is my App.js file...

import React from 'react';
import Navbar from './components/inc/Navbar';
import Home from './components/pages/Home';
import About from './components/pages/About';
import Contact from './components/pages/Contact';
import {BrowserRouter as Router} from 'react-router-dom'; 

function App() {
  return (
    
    <Router>
    <div>
     <Navbar/>
    <Home/>
   <About/>
   <Contact/>

  
    </div>
    </Router>
    
   
  );
}

export default App;

Please help(this is my first question btw).

CodePudding user response：

You need to wrap your components inside Route HOC, if you are using react router v5

 <Route path="/">
    <Home/>
 </Route>
 <Route path="/about">
   <About/>
 </Route>
 <Route path="/Contact">
   <Contact/>
 </Route>

if its react router v6, answer is

  <Route index path="/" element={<Home />} />
  <Route path="/contacts" element={<Contact/>} />
  <Route path=/about" element={<About/>} />

CodePudding user response：

If you don't know which version you use . please check package.json and search react-router-dom . Then you will see the version. (React router dom v6) If you use link ,You need to use router and routes. I think no error is shown your project. This is the documentation

https://reactrouter.com/docs/en/v6/getting-started/installation#create-react-app

This is demo code of routes , route

       import * as React from "react";
       import { Routes, Route, Link } from "react-router-dom";

       function App() {
        return (
         <div className="App">
            <h1>Welcome to React Router!</h1>
             <Routes>
               <Route path="/" element={<Home />} />
               <Route path="about" element={<About />} />
            </Routes>
        </div>
      );
     }

If you Use V5

 import {
   BrowserRouter,
   Switch,
   Route,
   Link,
   useRouteMatch
  } from "react-router-dom";

 function App() {
   return (
     <BrowserRouter>
      <Switch>
        <Route exact path="/">
         <Home />
       </Route>
       <Route path="/users">
         <Users />
       </Route>
    </Switch>
  </BrowserRouter>
 ); 
}

react router dom v5 documentation https://reactrouter.com/docs/en/v6/upgrading/v5

CodePudding user response：

You should import Routes and Route too from "react-router-dom";

then your code will become

import React from 'react';
import Navbar from './components/inc/Navbar';
import Home from './components/pages/Home';
import About from './components/pages/About';
import Contact from './components/pages/Contact';
import {Routes,Route ,BrowserRouter as Router} from 'react-router-dom'; 

function App() {
  return (
    
<Router>
 <div>
 <Navbar/>
    <Routes>
        <Route exact path="/" element={<Home/>}>
        <Route path="/about" element={ <About/>}>
        <Route path="/contact" element={ <Contact/>} />
    </Routes>
 </div>
</Router>
    
   
  );

CodePudding user response：

This should solve your problem, just edit this navbar as per your need

import React from "react";
import { Navbar, Nav, Container } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";

const Header = () => {
  return (
    <header>
      <Navbar bg='light' expand='lg'>
        <Container>
          <LinkContainer to='/'>
            <Navbar.Brand>Brand</Navbar.Brand>
          </LinkContainer>
          <Navbar.Toggle aria-controls='basic-navbar-nav' />
          <Navbar.Collapse id='basic-navbar-nav'>
            <Nav className='ml-auto'>
              <LinkContainer to='/cart'>
                <Nav.Link>
                  <i className='fas fa-shopping-cart'></i> Cart
                </Nav.Link>
              </LinkContainer>
              <LinkContainer to='/login'>
                <Nav.Link>
                  <i className='fas fa-user'></i> SignIn
                </Nav.Link>
              </LinkContainer>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </header>
  );
};

export default Header;