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>
);
Send a picture of your index.js file, so I could try to help you.
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;
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.