Reactjs component not rendering

[Cyanokid]

components are not rendering, somehow the path is exist in localhost. what i am writing inside the component not show up. I am sorry for this beginner question.

*in App.jsx

import React from 'react'
import Navbar from './components/Navbar/Navbar'
import Sidebar from './components/Sidebar/Sidebar'
import { Routes, Route } from 'react-router-dom'
import Add from './pages/Add/Add'
import List from './pages/List/List'
import Orders from './pages/Orders/Orders'

const App = () => {
  return (
    <div>
      <Navbar/>
      <hr />
      <div className="app-content">
        <Sidebar/>
        <Routes>
          <Route path='/add' element={<Add/>}/>
          <Route path='/list' element={<List/>}/>
          <Route path='/orders' element={<Orders/>}/>
        </Routes>
      </div>
      
    </div>
  )
}

export default App

*i paste all three pages here

*in pages Add.jsx

import React from 'react'
import './Add.css'

const Add = () => {
  return (
    <div className='add'>
        Add
  </div>
  )
}

export default Add

*in pages List.jsx

import React from 'react'
import './List.css'

const List = () => {
  return (
    <div>
      List
    </div>
  )
}

export default List

*in pages Orders.jsx

import React from 'react'
import './Orders.css'

const Orders = () => {
  return (
    <div>
        order
    </div>
  )
}

export default Orders

[pkdvalis]

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[Cyanokid]

thanks for the guide…

[lasjorg]

I assume you are talking about the components in the router and not all components?

Did you wrap App inside a BrowserRouter?

https://github.com/remix-run/react-router/blob/dev/examples/basic/src/main.tsx

---

The react-router-dom docs are very extensive, so I would suggest you read them. They do use the createBrowserRouter and data APIs for the most now it seems, but you can still find some plain component examples.

[Cyanokid]

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter } from "react-router-dom"

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

this is my main.jsx… already put BrowserRouter there.

[lasjorg]

Post a repo with your code.

Also, you didn’t answer the question. Is it all your components that are not rendering, or just the components for the routes?

Not to state the obvious, but do you have links in your nav or did you test by manually changing the URL so it matches one of the routes?

[Cyanokid]

sidebar inside App.jsx display the content but the element inside the route is not showing up. the path for the route is well displayed in url.

i already test by changing the url manually, but nothing show up

[Cyanokid]

but i dont know why, when i inspect the web i can the see the element that i want to return .

…

[ILM]

@lasjorg

Post a repo with your code.

please share a github repo ro something similar

[lasjorg]

So it is rendering the component.

Best guess without seeing your code, the component is behind the nav component, or your text color is white. So most likely a CSS issue.

As said, we need to see your code.

[Cyanokid]

my repo : GitHub - cyanokid/food-del

sorry for late response.

[lasjorg]

It is rendering the routes. Your components are down in the bottom left corner below the nav component.