react-router-dom not rendering anything in localhost:3000

Question

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>
    );
  }
}

score 2 · Accepted Answer · answered Nov 06 '21 at 00:20

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>

score 0 · Answer 2 · answered Apr 09 '23 at 17:37

0

Nothing else worked for me but this. If there is something like the following in your index.js:

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

remove the <React.StrictMode> element and the rendering will work.

answered Apr 09 '23 at 17:37

FunnyJava

446
1
6
17

react-router-dom not rendering anything in localhost:3000

2 Answers2