I have this issue alot using react router, it just makes my whole app blank.

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.

CodePudding user response：

You have mixed up your imports:

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

You've:

• Imported a BrowserRouter as the Route component
• Imported the low-level Router which is missing some required props to be passed to it

Fix the imports:

• Import BrowserRouter as Router
• Import the Route component

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;.

CodePudding user response：

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;

CodePudding user response：

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;]

CodePudding user response：

Fix the imports as stated above and then try to wrap your entire app in the browserRouter like this on the index.js, not the app.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

(it might also be an issue with the react-router-dom version, since some of them use Switch instead of Routes , which one are you using? is something logged on the console when you run your app?)