<Route> not show the component

user_12545295 0
Viewed 51

I'm got issue when i making navbar using raect but when i put <Route> component that make the web view blank, but if i remove the <Route> Is someone can helpme to fix my issue?

this is my code on App.js

import './App.css';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

function App() {
  return (
    <Router>
      <div>
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <Link className="navbar-brand" to="/">Logo</Link>
          <div className="navbar-nav">
            <Link className="nav-item nav-link" to="/">Home</Link>
            <Link className="nav-item nav-link" to="/premium">About Me</Link>
          </div>
        </nav>
      </div>
      <Route path="/" component={() => <h4>Home</h4>}></Route>
      <Route path="/premium" component={() => <h4>About Me</h4>}></Route>
    </Router>
  );
}

export default App;
jsx react-router reactjs frontend javascript
3 Answers

Things to note:

  1. Route needs to be direct children of Routes
  2. Children should be passed to element prop, instead of component
  3. element prop expects a React Node, not a function
import {
  BrowserRouter as Router,
  Route, 
  Routes,
  Link 
} from 'react-router-dom'

 <Router>
      <div>
        <nav>
          <Link to="/">Logo</Link>
          <div>
            <Link to="/">Home</Link>
            <Link to="/premium">About Me</Link>
          </div>
        </nav>
      </div>
    <Routes>
      <Route path="/" element={<h4>Home</h4>}></Route>
      <Route path="/premium" element={<h4>About Me</h4>}></Route>
    </Routes>
</Router>

removed className for readability

user_93999780

Based on OPs comment about the routes working but the routed content not rendering I will assume react-router-dom@6 is installed and working. The Route component API changed quite a bit from v5. Route components can only be rendered by the Routes component (the spiritual successor to RRDv5's Switch component) or by another Route component in the case of nested routes. Gone are the component, and render and children function props, replaced by a single element prop taking a ReactNode, a.k.a. JSX.

  • Wrap the Route components in a Routes component
  • Render the routed content on the Route component's element prop

Example:

import './App.css';
import {
  BrowserRouter as Router,
  Routes,  // <-- import Routes component
  Route,
  Link
} from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <Link className="navbar-brand" to="/">Logo</Link>
          <div className="navbar-nav">
            <Link className="nav-item nav-link" to="/">Home</Link>
            <Link className="nav-item nav-link" to="/premium">About Me</Link>
          </div>
        </nav>
      </div>
      <Routes> // <-- wrap routes in `Routes` component
        <Route
          path="/"
          element={<h4>Home</h4>} // <-- JSX on element prop
        />
        <Route
          path="/premium"
          element={<h4>About Me</h4>} // <-- JSX on element prop
        />
      </Routes>
    </Router>
  );
}

export default App;
user_86908570

For making a navbar you don't need the BrowserRouter or Route components, just the Link from react-router-dom

as shown in the quick start guide: reactrouter.com/QuickStart#Navigation


function Home() {
  return (
    <div>
      <h1>Home</h1>
      <nav>
        <Link to="/">Home</Link> |{" "}
        <Link to="about">About</Link>
      </nav>
    </div>
  );
}

also, the navbar should be put as an element attribute of a Route following this approach:

<BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route index element={<Home />} />
        <Route path="teams" element={<Teams />}>
          <Route path=":teamId" element={<Team />} />
          <Route path="new" element={<NewTeamForm />} />
          <Route index element={<LeagueStandings />} />
        </Route>
      </Route>
    </Routes>
  </BrowserRouter>
user_172042010
Related