how to fix cannot render a inside another error?

Question

I am new using react and i have a small app to build , i have done the backend RestApi and now i started to build the frontend using react here is some of the code of the frontend

App.js:

import React, { useState, useEffect } from 'react';
import { BrowserRouter, Route, Routes, useNavigate } from 'react-router-dom';

import Navbar from './components/Navbar';
import ProductTypeList from './components/ProductTypeList';
import ProductTypeForm from './components/ProductTypeForm';
import ProductList from './components/ProductList';
import ProductForm from './components/ProductForm';

import axios from 'axios';

function App() {
  const navigate = useNavigate();

  const handleButtonClick = () => {
    navigate('/product-types');
  };

  const [productTypes, setProductTypes] = useState([]);
  const [products, setProducts] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:3001/product-types')
      .then(res => setProductTypes(res.data))
      .catch(err => console.log(err));

    axios.get('http://localhost:3001/products')
      .then(res => setProducts(res.data))
      .catch(err => console.log(err));
  }, []);

  const handleAddProductType = (newProductType) => {
    setProductTypes([...productTypes, newProductType]);
  };

  const handleUpdateProductType = (updatedProductType) => {
    const updatedProductTypes = productTypes.map(productType => {
      if (productType.id === updatedProductType.id) {
        return updatedProductType;
      }
      return productType;
    });
    setProductTypes(updatedProductTypes);
  };

  const handleDeleteProductType = (deletedProductTypeId) => {
    axios.delete(`http://localhost:3001/product-types/${deletedProductTypeId}`)
      .then(() => {
        const updatedProductTypes = productTypes.filter(productType => productType.id !== deletedProductTypeId);
        setProductTypes(updatedProductTypes);
      })
      .catch(err => console.log(err));
  };

  const handleAddProduct = (newProduct) => {
    setProducts([...products, newProduct]);
  };

  const handleUpdateProduct = (updatedProduct) => {
    const updatedProducts = products.map(product => {
      if (product.id === updatedProduct.id) {
        return updatedProduct;
      }
      return product;
    });
    setProducts(updatedProducts);
  };

  const handleDeleteProduct = (deletedProductId) => {
    axios.delete(`http://localhost:3001/products/${deletedProductId}`)
      .then(() => {
        const updatedProducts = products.filter(product => product.id !== deletedProductId);
        setProducts(updatedProducts);
      })
      .catch(err => console.log(err));
  };


  return (
    <BrowserRouter>
      <div className="container">
        <Navbar />
        <Routes>
          <Route path="/" element={<h1>Welcome to the Product Manager</h1>} />
          <Route path="/product-types" element={
            <>
              <ProductTypeList productTypes={productTypes} onDeleteProductType={handleDeleteProductType} />
              <ProductTypeForm onAddProductType={handleAddProductType} />
            </>
          } />
          <Route path="/product-types/:id" element={<ProductTypeForm productTypes={productTypes} onUpdateProductType={handleUpdateProductType} />} />
          <Route path="/products" element={
            <>
              <ProductList products={products} onDeleteProduct={handleDeleteProduct} />
              <ProductForm productTypes={productTypes} onAddProduct={handleAddProduct} />
            </>
          } />
          <Route path="/products/:id" element={<ProductForm productTypes={productTypes} onUpdateProduct={handleUpdateProduct} />} />
        </Routes>
        <button onClick={handleButtonClick}>Go to Product Types</button>
      </div>
</BrowserRouter>
);
}

export default App;

and index.js:

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

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

reportWebVitals();

and after starting the app using npm start nothing show on the screen and i get this error on the console :

caught Error: You cannot render a <Router> inside another <Router>. 
You should never have more than one in your app.

How can i fix this error ?

Both your files include a `BrowserRouter` (renamed to `Router` in the index), as the error says, you cannot nest one inside the other. — DBS, May 12 '23 at 13:05
I would imagine you could just delete one of them. With the structure of your app, I don't think it would matter which one. — DBS, May 12 '23 at 13:12

score 1 · Accepted Answer · answered May 12 '23 at 13:24

There is no point in having the router in your index.js because you already declared and set the routes inside your App component, which is also the usual way of using it:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

The code above should fix your problem.

how to fix cannot render a inside another error?

1 Answers1