Search code examples
reactjsreact-router-dom

react-router-dom <routes> not rendering anything in localhost:3000

I am trying to use to render different components based on the URL. My code is in the image. For some reason localhost:3000 is not rendering anything except for when it is loaded up.

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <NavBar />

          <Routes>
            <Route exact path="/" component={<Landing />}>
              <Route exact path="/register" component={<Register />} />
              <Route exact path="/login" component={<Login />} />
            </Route>
          </Routes>
        </div>
      </Router>
    );
  }
}

enter image description here

Solution

  • You are using the incorrect prop to render the components into the routes. In v6 the Route components all use only an element prop. This is a breaking change between v5 that had component, render, and children props.

    <Routes>
  <Route path="/" element={<Landing />}>
    <Route path="register" element={<Register />} />
    <Route path="login" element={<Login />} />
  </Route>
</Routes>

    Edit react-router-dom-routes-not-rendering-anything-in-localhost3000