Using Nav.Link | Remix | Page 1

frozen crane Sep 28, 2022, 3:18 PM

#

your navbar needs to be rendered inside the router

#

do you have a <Router>? do any links work?

twilit sigil Sep 28, 2022, 4:27 PM

#

frozen crane do you have a <Router>? do any links work?

I do not have <Router>

twilit sigil Sep 28, 2022, 4:47 PM

#

Links arent showing up due to that error

frozen crane Sep 28, 2022, 4:56 PM

#

ok, and just making sure, you are using React Router and not Remix, correct?

twilit sigil Sep 28, 2022, 4:56 PM

#

Correct

frozen crane Sep 28, 2022, 4:57 PM

#

and this is RR 6.4?

#

do you have a <RouterProvider> like it says in the tutorial?

#

that error could stand to be updated, it's now <RouterProvider> and not <Router>

twilit sigil Sep 28, 2022, 4:58 PM

#

I believe I have 6.4

frozen crane Sep 28, 2022, 4:58 PM

#

https://reactrouter.com/en/main/routers/router-provider#routerprovider

twilit sigil Sep 28, 2022, 4:58 PM

#

in main.tsx?

frozen crane Sep 28, 2022, 4:59 PM

#

yeah, I mean basically you want it at the top level of your app where you call React's render()

#

you need to call

const router = createBrowserRouter([ /* route config */ ])

and set up your route config there, and pass that to RouterProvider

twilit sigil Sep 28, 2022, 5:03 PM

#

Im trying that now

#

i will let u know

twilit sigil Sep 28, 2022, 5:16 PM

#

frozen crane you need to call ```ts const router = createBrowserRouter([ /* route config */ ]...

I made it, and when it means children. Is that similar pages to the same path? I added a few more links, they dont show up or do anything

frozen crane Sep 28, 2022, 5:23 PM

#

what did you pass in to createBrowserRouter as the route config?

twilit sigil Sep 28, 2022, 5:23 PM

#

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "/home",
        element: <Home />,
      },
      {
        path: "/about",
        element: <About />,
      },
      {
        path: "/store",
        element: <Shop />,
      },
    ]
  }
])

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <RouterProvider
    router={router}
    fallbackElement={<App />}
  />
)

frozen crane Sep 28, 2022, 5:24 PM

#

children means routes underneath a path segment. so if you wanted /abc and /abc/def you could either do

[ 
  { 
    path: 'abc',
    children: [{ path: "def" }] 
  }
]

or

[ 
  { path: 'abc' },
  { path: 'abc/def' },
]

twilit sigil Sep 28, 2022, 5:25 PM

#

oh!

frozen crane Sep 28, 2022, 5:25 PM

#

I'm guessing your <App> doesn't have an outlet

#

what's in it

#

the outlet is where the children would render

twilit sigil Sep 28, 2022, 5:25 PM

#

it only has <Navbar /> & Container

frozen crane Sep 28, 2022, 5:26 PM

#

ah that makes sense then. put <Outlet /> in the container

#

home, about, and shop will show up in there

twilit sigil Sep 28, 2022, 5:27 PM

#

from router?

frozen crane Sep 28, 2022, 5:27 PM

#

don’t know what you mean

twilit sigil Sep 28, 2022, 5:27 PM

#

It doesn't know what Outlet is from

frozen crane Sep 28, 2022, 5:27 PM

#

you have to import it from react-router-dom

twilit sigil Sep 28, 2022, 5:28 PM

#

that is what i meant, when I said from router. Sorry

frozen crane Sep 28, 2022, 5:28 PM

#

it is really better to start from what the tutorial says to do

#

then add your pages to something that’s already working

twilit sigil Sep 28, 2022, 5:32 PM

#

Links are not showing up. I will figure it out. Im rushing it.

#Using Nav.Link