React Routing with Navbar only showing blank screen-CodePudding

I have been trying to route to different pages in my react site but for some reason the whole page goes blank as soon as I add any routing. I am using npm and react bootstrap

Here is my code, I am trying to route to simple pages like Home.

App.js

import Artists from './Artists';
import Home from './Home';
import Music from './Music';
import Navigation from "./Navigation.js";
import 'react-bootstrap/dist/react-bootstrap.min.js';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Footer from './footer'
function App() {
return (
<div className="App">
<Router>
<Navigation></Navigation>
<Route exact path="/" component={Home}></Route>
<Route path="/artists" component={Artists}></Route>
<Route exact path="/music" component={Music}></Route>
</Router>
<Footer/>
</div>
);
}
export default App;

Navigation.js

import React from "react";
import { Button, Navbar, Container} from 'react-bootstrap'
import { Link, Router, Route } from "react-router-dom";
import Nav from "react-bootstrap/Nav";
import { LinkContainer } from "react-router-bootstrap";
import Artists from './Artists'
import Home from './Home'

const Navigation = () => {
  return (


  <Navbar bg="light" variant="light">

    <Navbar.Brand>
      <img src={require('.//Nothing Iconic Reccords.png')} width="135"
        height="135"/>
    </Navbar.Brand>

    <Nav className="nav-link">
    <LinkContainer to="/">
<Nav.Link>Home</Nav.Link>
</LinkContainer>
<LinkContainer to="/artists">
<Nav.Link>Artists</Nav.Link>
</LinkContainer>
<LinkContainer to="/music">
<Nav.Link>Music</Nav.Link>
</LinkContainer>

    </Nav>

  </Navbar>


  );
};

export default Navigation;

CodePudding user response：

Try using routes, put route in routes and add props element in route:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

<Router>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/artists" element={<Artists />} />
    <Route path="/music" element={<Music />} />
  </Routes>
</Router>

CodePudding user response：

You need to carefully read the react-router-dom documentation. According to the documentation,

You must import { BrowserRouter as Router, Routes, Route } from "react-router-dom" in your App.js file.
You only need to wrap your respective routes inside element and leave everyother component outside of element i.e. component.
You need to write your components in the form of HTML elements inside tag e.g. "<Route exact path="/" component={} />"

Your App.js file should look as same as the one below:

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Artists from './Artists';
import Home from './Home';
import Music from './Music';
import Navigation from "./Navigation.js";
import 'react-bootstrap/dist/react-bootstrap.min.js';
import Footer from './footer'

export default function App() {
  return (
    <Router>
        <div>
            <Navigation/>
            <Routes>
                 <Route exact path="/" component={<Home />} />
                 <Route path="/artists" component={<Artists />} />
                 <Route exact path="/music" component={<Music />} />
            </Routes>
      </div>
    </Router>
  );
}


export default App

If you want to get a specific component on some action e.g. onClick, like inside navigation component, you only need to import { LinkContainer } or { Link } from "react-router-dom", because Link and LinkContainer, both behaves the same way. So you don't need to import both of them at a time in a single file. Importing Router and Route make no sense in the Navigation.js file. Since, your are not making any use of Artist and Home component inside Navigation.js file, you are not required to import them in Navigation.js.

Your Navigation.js file should look as same as the one below:

import { link } from "react-router-dom"
import React from "react";
import { Button, Navbar, Container} from 'react-bootstrap'
import Nav from "react-bootstrap/Nav";

const Navigation = () => {
    return (
        <Navbar bg="light" variant="light">
            <Navbar.Brand>
                <img src={require('.//Nothing Iconic Reccords.png')} width="135" 
                height="135"/>
            </Navbar.Brand>

            <Nav className="nav-link">
                <LinkContainer to="/">
                    <Nav.Link>Home</Nav.Link>
                </LinkContainer>
                <LinkContainer to="/artists">
                    <Nav.Link>Artists</Nav.Link>
                </LinkContainer>
                <LinkContainer to="/music">
                    <Nav.Link>Music</Nav.Link>
                </LinkContainer>

            </Nav>
        </Navbar>
    );
};

export default Navigation;

CodePudding user response：

For react router 5 or below

You're missing an important wrapper called <Switch> that wraps around your routes (<Route> elements), in your App.js file. Here's the quickstart guide describing the structure.

<Router>
   <Switch>
       <Route path="/about">
           <About />
       </Route>
   </Switch>
</Router>

Without this wrapper (or similar ones as described in the documentation) , react router doesn't know what matching logic you want to apply, so it can't render a specific page/route.

If you are using React router 6 (most recent version), the entire syntax needs to be re-written.

For React router 6 (most recent version) The you have to order your routes like so:

<BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}/>
    </Routes>
  </BrowserRouter>

This is link goes more in-depth about this