组件未呈现，问题 react-router

Question

I'm having a problem with react-route. The NoteList component is not rendering.

app.js

import { BrowserRouter as Router, Routes } from 'react-router-dom';
import logoNotes from './img/logoNotes.png';
import NoteList from './components/NoteList/NoteList';
import './App.css';

function App() {
  return (
    <Router>
      <div className='aplication-notes'>
        <div className='notes-logo-container'>
          <img src={logoNotes} className='notes-logo' alt='logo' />
        </div>
        <div className='note-list'>
          <h1> my notes</h1>
          <br></br>
          <Routes
            path='/src/components/NoteList/NoteList'
            element={<NoteList />}
          />
        </div>
      </div>
    </Router>
  );
}

export default App;

I can see the div and h1 that is in the app.js file but not the Notelist component.

How can I solve this problem?

Answer 1

The Routes component is only responsible for wrapping Route components and handles the path matching duties. It doesn't take path or element props. These belong to the Route component.

Import the Route component and render the NoteList component by the Route and wrap the Route with Routes .

Example:

import {
  BrowserRouter as Router,
  Routes
  Route // <-- import
} from 'react-router-dom';
import logoNotes from './img/logoNotes.png';
import NoteList from './components/NoteList/NoteList';
import './App.css';

function App() {
  return (
    <Router>
      <div className='aplication-notes'>
        <div className='notes-logo-container'>
          <img src={logoNotes} className='notes-logo' alt='logo' />
        </div>
        <div className='note-list'>
          <h1> my notes</h1>
          <br />
          <Routes> // <-- wrap Route components
            <Route // <-- Route renders content
              path="/src/components/NoteList/NoteList"
              element={<NoteList />}
            />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

Now when you navigate to "/src/components/NoteList/NoteList" in the browser you should see the UI rendered as well as the NoteList component.