I have the following:

import React from 'react';
import { View } from "react-native";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

import Home from './components/Home';

function App() {
  return (
    <Router>
      <View>
      <Routes>
        <Route path="/">
          <Home/>
        </Route>
      </Routes>
      </View>
    </Router>
  );
}
export default App;

Whenever I go to localhost:3000/ or localhost:3000/home, a blank page appears which means my components are not being rendered when on these pages. I followed both examples on https://v5.reactrouter.com/web/guides/quick-start (web version and native version), however neither seems to work although I think that documentation is slightly outdated because Switch was changed to Routes.

I can't seem to understand what I'm doing wrong here

CodePudding user response：

You are using react-router-dom v6, the API changed a bit. Render the routed components on the Route component's element prop as JSX.

<Routes> and <Route>

function App() {
  return (
    <Router>
      <View>
        <Routes>
          <Route path="/" element={<Home/>} />
        </Routes>
      </View>
    </Router>
  );
}