You cannot render routes

Question

I have made one page in my project, it's App.tsx and it contains a lot of components. like this:

import React from 'react';
import './App.css';
import Header from './components/Header';
import Underline from './components/Underline';
import BodyPart from './components/BodyPart';
import Footer from './components/Footer';
import AboveFooter from './components/AboveFooter'
import Home from './Home';
import {createBrowserRouter, createRoutesFromElements, Route, Link, Outlet, RouterProvider, BrowserRouter, Routes} from 'react-router-dom'



function App() {

  return (
   
      <div>
        <Header />
        <Underline />
        <BodyPart />
        <AboveFooter />
        <Footer />

       
      </div>
    
  );
}

export default App;

I also want to have another pages, and I want to click on a button that is inside of one of the components to transfer me to my next page:

 <Link to="/home">
                <button className='bg-purple-950 rounded-lg h-24 w-3/4 mt-32 ml-44 
            pt-auto flex  justify-between py-1'>
                    <img src={glob} alt="" className='h-20 w-32 ml-2 mt-1' />
                    <div className='flex-col h-24 mt-2'>
                        <h1 className='font-bold text-2xl text-yellow-600'>Globaltel POSTPAID paketi uz telefone</h1>
                        <p className='font-bold text-2xl text-white'>u svim Gigatron prodavnicama!</p>
                    </div>
                    <img src={majstor} alt="" className='' />
                    <div className=' h-24 w-72 relative'>
                        <button className='h-10 w-32 rounded-full absolute right-1 bottom-3 bg-yellow-600 hover:bg-yellow-300'> Saznajte više</button>
                    </div>
                </button>
            </Link>

but I keep getting error: you cannot render a inside another . you should never have more than one in your app.

I have tried BrowserRoutes, only Route, Routes, createBrowserRouter, createRoutesFromElements, paths and elements and I just keep getting message or I am just clicking on a button and nothing happens

score 0 · Answer 1 · edited Jul 10 '23 at 21:51

Can you please give some more detail please? The purpose of this question understanding how to navigate to another component when clicking on a Link, if that is the case you can follow this article : https://www.knowledgehut.com/blog/web-development/routing-in-reactjs

also, you have to refactor components inside your app components as follows

 <Home> Add all these subcomponents inside here header, sections, etc  </Home>  
 <AboutUs> all subcomponents belonging to About us go here </AboutUs>

after that use these components inside App() wrapping it using React router

score 0 · Answer 2 · answered Jul 05 '23 at 19:12

so apparently placing <button></button>s and <div></div>s inside <button></button>s is invalid and considered a bad practice. You can checkout this thread: https://stackoverflow.com/questions/39386497/can-i-nest-button-inside-another-button#:~:text=It%20is%20not%20valid%20to,be%20no%20interactive%20content%20descendant. From what I understood, fixing this may solve the errors. Also, in for setting up routing using <Link></Link> and <NavLink></NavLink> you need to pass the required route to their respective to="" props in the following manner:

<NavLink to="/Home">Home</NavLink> 
<Link to="/About">About</Link>

or

<Link to="/some-route-address">Click here</Link>

The way you pass the routes to the to prop also has a lot to do with whether your route paths are relative or otherwise. In any case, you may want to consider going through some of the important sections of react-router docs: https://reactrouter.com/en/main/start/overview

You cannot render routes

2 Answers2