React Router v6 - Using NavLink but getting No routes matched location "/"

user_18562148 0
Viewed 623

I am trying to use a navlink in my app.jsx file to create links in my navbar but when I try to npm start, I dont see the nav links and I get a message that says No routes matched location "/". I'm not sure why. I saw somewhere that I needed to start using element but I'm not sure how. I'll show app.jsx file with the element statements that didn't seem to work still and the file without using element at all which also didn't help but is what I'm used to. Can someone point me in the right direction?

index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './pages/App/App';
import { BrowserRouter, Routes, Route } from 'react-router-dom'

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <React.Fragment>
        <Route render={() => <App/>} />
      </React.Fragment>
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
);

App.jsx : with element

import React, { useState } from 'react';
import { Route, NavLink } from 'react-router-dom'
import './App.css';

function App() {

  const [puppies, setPuppies] = useState([])

  return (
    <div className="App">
      <header className="App-header">
        React Puppies CRUD
        <nav>
          <NavLink exact to='/' element={<div>Index</div>}>Puppy List</NavLink>
          <NavLink className='m-left' exact to='/add' element={<div>Add</div>}>Add Puppy</NavLink>
        </nav>
      </header>
      <main>
      </main>
    </div>
  );
}

export default App;

App.jsx : without element

import React, { useState } from 'react';
import { Route, NavLink } from 'react-router-dom'
import './App.css';

function App() {

  const [puppies, setPuppies] = useState([])

  return (
    <div className="App">
      <header className="App-header">
        React Puppies CRUD
        <nav>
          <NavLink exact to='/'>Puppy List</NavLink>
          <NavLink className='m-left' exact to='/add'>Add Puppy</NavLink>
        </nav>
      </header>
      <main>
      </main>
    </div>
  );
}

export default App;
react-router-dom reactjs routes javascript
1 Answers

Links use a to prop for the target route they are linking to, and the UI needs to be rendered on Route components on the element prop. I suggest unconditionally rendering the App component and move the routes into it.

Example:

index.js

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

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

App

import React, { useState } from 'react';
import { Routes, Route, NavLink } from 'react-router-dom'
import './App.css';

function App() {

  const [puppies, setPuppies] = useState([]);

  return (
    <div className="App">
      <header className="App-header">
        React Puppies CRUD
        <nav>
          <NavLink end to='/'>Puppy List</NavLink>
          <NavLink className='m-left' to='/add'>Add Puppy</NavLink>
        </nav>
      </header>
      <main>
        <Routes>
          <Route path="/" element={<div>Puppy List</div>} />
          <Route path="/add" element={<div>Add Puppy</div>} />
        </Routes>
      </main>
    </div>
  );
}

export default App;
user_86908570
Related