0
290
ViewsReact Router rendering blank page
I have this issue alot using react router, it just makes my whole app blank.
the ] at the end was a typo and wouldn't render a blank page, it would just give some normal error
This is my App.js:
import './App.css';
import { BrowserRouter as Route, Router, Routes, Link } from 'react-router-dom';
import Home from './components/home';
import About from './components/about';
import Projects from './components/projects';
function App() {
return (
<Router>
<header>
<div className='logo'>MyPortfolio</div>
<h2>Eshwar Tangirala</h2>
<ul>
<Link><li>Home</li></Link>
<Link to="/about"><li>About</li></Link>
<Link to="/projects"><li>Projects</li></Link>
</ul>
</header>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="/about" element={<About/>}/>
<Route path="projects" element={<Projects/>}/>
</Routes>
</Router>
);
}
export default App;
My other components, like home, about, and projects just have an H1 with their name on it.
·
Juan Pablo Isaza
3 answers
Answer question0
You have mixed up your imports:
import { BrowserRouter as Route, Router, Routes, Link } from 'react-router-dom';
You've:
- Imported a
BrowserRouteras theRoutecomponent - Imported the low-level
Routerwhich is missing some required props to be passed to it
Fix the imports:
- Import
BrowserRouterasRouter - Import the
Routecomponent
Correct imports
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
And if not a copy/paste typo, remove the trailing ] on the App export:
export default App;] to export default App;.
·
Juan Pablo Isaza
Report
0
If the code running in your editor is the same as the above snippet, you have a typo in your export (the extra ])
export default App;
·
Juan Pablo Isaza
Report
0
Check your default App export remove this ] you have an array ] closing tag.
Your default export is should be like this:
export default App;
Not
export default App;]
·
Juan Pablo Isaza
Report
Answer question