Having some error while doing a react restaurant project

user_17594252 0
Viewed 75

RestaurantUpdate.js

import React, { Component } from 'react';

class RestaurantUpdate extends Component {
render() {
    console.warn(this.props.match.params.id);
    return (
        <div>
            <h1>Update</h1>

        </div>
    );
  }
}

export default RestaurantUpdate;

App.js

import React from 'react';
import {
Navbar,
Nav,
Container
} from 'react-bootstrap';
import './App.css';
import {
BrowserRouter as Router,
Routes,
Route,
Link
} from 'react-router-dom'
import Home from "./components/Home"

import RestaurantSearch from "./components/RestaurantSearch"
import RestaurantCreate from "./components/RestaurantCreate"
import RestaurantList from "./components/RestaurantList"
import RestaurantUpdate from "./components/RestaurantUpdate"
import RestaurantDetail from "./components/RestaurantDetail"
function App() {
return (
<div className="App">
  <Router>
    <Navbar bg="dark" variant="dark">
      <Container>
         <Navbar.Brand href="#home"><img width="75px" height="55px" src="/brand.png" alt="Brand" /></Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto" >

            <Nav.Link href="#home" ><Link to="/" style={{ color: 'yellow', textDecoration: 'inherit' }}>Home</Link></Nav.Link>
            <Nav.Link href="#link"><Link to="/list" style={{ color: 'yellow', textDecoration: 'inherit' }}>List</Link></Nav.Link>
            <Nav.Link href="#link"><Link to="/create" style={{ color: 'yellow', textDecoration: 'inherit' }}>Create</Link></Nav.Link>
            <Nav.Link href="#link" ><Link to="/search" style={{ color: 'yellow', textDecoration: 'inherit' }}>Search</Link></Nav.Link>
            <Nav.Link href="#link"><Link to="/details" style={{ color: 'yellow', textDecoration: 'inherit' }}>Detail</Link></Nav.Link>
            <Nav.Link href="#link"><Link to="/update" style={{ color: 'yellow', textDecoration: 'inherit' }}>Update</Link></Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
    <Routes>
      <Route path="/list" element={<RestaurantList />} />
      <Route path="/create" element={<RestaurantCreate />} />
      <Route path="/search" element={<RestaurantSearch />} />
      <Route path="/update/:id" render={props => (
        <RestaurantUpdate {...props} />
      )} />
      <Route path="/details" element={<RestaurantDetail />} />
      <Route exact path="/" element={<Home />} />
    </Routes>
  </Router>
</div >
);
}

export default App;


<Route path="/update/:id" render={props => (<RestaurantUpdate {...props} />)}/>

I am getting error in console. "Matched leaf route at location "/update/1" does not have an element. This means it will render an with a null value by default resulting in an "empty" page."

i was expecting all the params and id in the console. The update is not displaying as well. Can anyone tell me error.I guess there is problem with syntax due to updated version. But no sure. I am using the latest version. So kindly tell me where is the error.

react-router-dom react-native reactjs render javascript
3 Answers

You are probably using react-router-dom v6 and above since I see element props in other routes. Also your error says it is missing element here

Matched leaf route at location "/update/1" does not have an element

Try with this modification

<Route path="/update/:id" element={<RestaurantUpdate {...props} />} />
user_135448490

Issue

The path="/update/:id" route isn't rendering any content on the element prop. In react-router-dom@6 the Route component API changed significantly, there is no longer any component or render and children function props and there are no longer any route props, i.e. no location, match, or history props. The RestaurantUpdate component isn't rendered, and even if it was, the this.props.match is undefined.

Solution

Render the RestaurantUpdate component on the element prop and use the useParams hook to access the id path parameter.

<Routes>
  <Route path="/list" element={<RestaurantList />} />
  <Route path="/create" element={<RestaurantCreate />} />
  <Route path="/search" element={<RestaurantSearch />} />
  <Route path="/update/:id" element={<RestaurantUpdate />} />
  <Route path="/details" element={<RestaurantDetail />} />
  <Route exact path="/" element={<Home />} />
</Routes>

Since RestaurantUpdate is a class component you'll need to either convert it to a React function component or create a custom withRouter HOC to inject the path params as a prop.

Convert to function component

import React, { useEffect } from 'react';
import { useParams } from 'react-router-dom';

const RestaurantUpdate = () => {
  const { id } = useParams();

  useEffect(() => {
    console.warn(id);
  }, [id]);

  return (
    <div>
      <h1>Update</h1>

    </div>
  );
};

export default RestaurantUpdate;

Create a withRouter HOC

import { useParams, /* other hooks */ } from 'react-router-dom';

const withRouter = Component => props => {
  const params = useParams();
  // other hooks
  return (
    <Component
      {...props}
      {...{ params, /* other hook props */ }}
    />
  );
};

export default withRouter;

...

import React, { Component } from 'react';
import withRouter from '../path/to/withRouter';

class RestaurantUpdate extends Component {
  render() {
    console.warn(this.props.match.params.id);
    return (
      <div>
        <h1>Update</h1>

      </div>
    );
  }
}

export default withRouter(RestaurantUpdate);
user_86908570

... however If you dont wanna go with React.FC you may use (as a quick solution) regexp over the: window.location.pathname.match(/\update\/(\d+)/)

"/update/123".match(/\update\/(\d+)/); // ['update/123', '123', index: 1, input: '/update/123', groups: undefined]
user_91339030
Related