<Route> not show the component-CodePudding

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;

CodePudding user response：

Route needs to be direct children of Routes

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

 <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>
      <Route path="/" element={() => <h4>Home</h4>}></Route>
      <Route path="/premium" element={() => <h4>About Me</h4>}></Route>
    </Routes>
</Router>

CodePudding user response：

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>