Why is my React app portion rendering a blank page?-CodePudding

I want my project to display a navigation bar which includes: Home, Department and Employee and "React JS Frontend" in the header.

The app compiles and the end result is a white screen. Initially, I got an error message using the Switch function which was "export 'Switch' (imported as 'Switch' was not found in 'react-router-dom'). I changed it to Route and now have no error messages but nothing else is rendering.

import logo from './logo.svg';
import './App.css';
import {Home} from './Home';
import {Department} from './Department';
import {Employee} from './Employee';
import {BrowserRouter, Route, Switch,NavLink} from 'react-router-dom';


function App() {
  return (
    <BrowserRouter>
    <div className="App container">
      <h3 className="d-flex justify-content-center m-3">
        React JS Frontend
      </h3>
      
      <nav className="navbar navbar-expand-sm bg-light navbar-dark">
        <ul className="navbar-nav">
          <li className="nav-item- m-1">
            <NavLink className="btn btn-light btn-outline-primary" to="/home">
              Home
            </NavLink>
          </li>         
         <li className="nav-item- m-1">
            <NavLink className="btn btn-light btn-outline-primary" to="/department">
              Department
            </NavLink>
          </li>
          <li className="nav-item- m-1">
            <NavLink className="btn btn-light btn-outline-primary" to="/employee">
              Employee
            </NavLink>
          </li>
        </ul>
      </nav>

      <Route>
        <Route path='/home' component={Home}/>
        <Route path='/department' component={Department}/>
        <Route path='/employee' component={Employee}/>
      </Route>
    </div>
    </BrowserRouter>
  );
}

export default App;

CodePudding user response：

Here you are wrapping the routes in the wrong way.

 <Switch>
    <Route path='/home' component={Home}/>
    <Route path='/department' component={Department}/>
    <Route path='/employee' component={Employee}/>
  </Switch>

You should wrap it in Switch as shown above. I will suggest you, go from proper documentation.

CodePudding user response：

<Route>
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/department" component={Department} />
        <Route path="/employee" component={Employee} />
      </Switch>
    </Route>