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
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.
function App() {
return (
<Router>
<View>
<Routes>
<Route path="/" element={<Home/>} />
</Routes>
</View>
</Router>
);
}