React Router 渲染空白页面

Question

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.

Answer 1

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

Answer 2

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;

Answer 3

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

Answer 4

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?)