react-router-dom v6.4 not rendering components

user4dNl 0
Viewed 54

I know there's a ton of similar questions like this but I'm super stumped and I simply cannot get this to work. If I code the component Home in the return like this, my page renders fine:

App.jsx

import './App.css';
import Home from './pages/Home.jsx'

function App() {
  return (
    <Home />
  );
}

export default App;

But when I move it into the router structure it will not load no matter what I've tried

App.jsx

import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home.jsx'

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

export default App;

Home.jsx

function Home() {
    return (
      <div style={{ padding: 20 }}>
        <h2>Home View</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adip.</p>
      </div>
    );
  }

  export default Home;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App.jsx';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
react-router-dom reactjs
2 Answers

I think the problem is in your app.js. please try this one:

import './App.css';
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
import Home from './pages/Home.jsx'

function App() {
  return (
    <BrowserRouter>
     <Routes> // your problem occure here
        <Route path="/" element={<Home />} />
     </Routes>
    </BrowserRouter>
  );
}

export default App;
userCNDS0

Well I dont know exact what was causing the error unfortunately, but I restarted a new app (this was just a test app anyway) and everything worked properly. I also reinstalled back to v6.3 but not sure if that made any difference

user4dNl0
Related