Kevin Powell - Community•7mo ago

React/Vite -> Trying to connect routes & components together through App.jsx

https://github.com/callum-laing/react-test-proj Clicking the Link at the bottom of the page does move us from http://127.0.0.1:5173 to http://127.0.0.1:5173/transition so the route is working, but the content isn't changing.. I thought it would show the component's content as I have the route path correct (I think) Edit: Is it to do with the content that is already on the page? does this need to perhaps be in a component and then rendered in also?

function App() {
  return (
    <Router>
      <div>
        <div className="intro">
          <h1>The Playground</h1>
          <p>Where we "test" whatever comes to mind.</p>
        </div>
        <div>
          <Link to="/transition">Transition Example</Link>

          <Routes>
            <Route path="/transition" element={<TransitionExample />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

function App() {
  return (
    <Router>
      <div>
        <div className="intro">
          <h1>The Playground</h1>
          <p>Where we "test" whatever comes to mind.</p>
        </div>
        <div>
          <Link to="/transition">Transition Example</Link>

          <Routes>
            <Route path="/transition" element={<TransitionExample />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

23 Replies

vince•7mo ago

https://v5.reactrouter.com/web/guides/quick-start I think it's something like this:

<Router>
 <Switch>
    <Route path="/about">
      <About />
    </Route>
    <Route path="/users">
      <Users />
    </Route>
    <Route path="/">
      <Home />
    </Route>
  </Switch>
</Router>

<Router>
 <Switch>
    <Route path="/about">
      <About />
    </Route>
    <Route path="/users">
      <Users />
    </Route>
    <Route path="/">
      <Home />
    </Route>
  </Switch>
</Router>

Rather than

<Route path="/transition" element={<TransitionExample />} />

<Route path="/transition" element={<TransitionExample />} />

Depends on what version you're using; I honestly hate React Router because there's like 20 different ways to do it depending on your version v6.x uses something like this:

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
  },
]);

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
  },
]);

https://reactrouter.com/en/main/start/tutorial

CDLOP•7mo ago

it's the only way outside of Next, isnt it?

vince•7mo ago

I'm not sure but I know it's really popular if you're using something like create-react-app If you're using CRA(P) in 2024 though you're behind It's deprecated

CDLOP•7mo ago

yeah that isnt being used anymore its vite or next Next would've been much easier but I wanted to get my head around react on it's own again first before I move back into that.... abyss..

vince•7mo ago

Lol yea makes sense but at the same time you don't want to spend your time learning something that you won't be using I think it's okay that you understand that without Next, you'd have to make the routes manually. What was I going to say I just got a brain fart Basically React is an abstraction anyway, so it's like you're learning an abstraction on vanilla JS and you already understand a good bit of vanilla JS. I'd say if anything if you really want to learn how SPAs work you go into how they are implemented in vanilla JS But even I don't know how that's done. Just no point in knowing atm. Giant rabbithole with no real purpose

CDLOP•7mo ago

😄 So uhh... what should I be doing here? 🤣

vince•7mo ago

Honestly I think it's in your best bet to just build stuff with Next rather than trying to worry about every little abstraction And that probably would have never came out of my mouth a couple years ago but it's just not practical; there's way too much stuff to learn in 10 lifetimes for 1 person to grasp everything I'll always advocate learning the fundamentals and progressing in vanilla html / css, js -- but once you start going into framework / library territory, they're built to make your life easier. don't sweat not knowing how they work internally as they're built by hundreds of people a lot of the time. Now I'm not going to say don't learn how they work, but don't make it a priority. Do that when you're bored or want to do something new. You're focused on finding a job so do something practical yknow

CDLOP•7mo ago

Fair enough tbh, makes sense.. The app idea, which hopefully makes sense.. main page -> click a link -> concept component loads. in Nextjs that'll be a page, so I'm just loading page files, that's fine and easy but if I wanted to just load a concept on the current page, is that a "thing" that is done commonly, or am I better off utilizing pages? if that makes sense

vince•7mo ago

Oh you mean load an element based off the route rather than a whole page? I don't know the React way to do it but could just do something as simple as a JS file that looks at the url You could also use a useEffect hook I think to do that

CDLOP•7mo ago

yea not sure tbh, I've never done it and didn't know if it was commonly done or what not when it comes to changing content I went straight into pages and routes

vince•7mo ago

sounds like you'd want to use a button anyway, maybe look into useEffect / useRef / and I think "portals" might be relevant but not sure None of this sounds like something that'll move you closer to a job though tbh From the bit I read here and there it sounds like you're honestly stuck in some sort of tutorial hell minus the tutorials Have you tried freelancing for friends / relatives to get something on your portfolio? That's what I did and it landed me my job

CDLOP•7mo ago

I haven't tbh, I think everyone's kinda given up on me becoming a dev tbh lmao Pretty much. I've no idea what I'm doing

vince•7mo ago

just start doing some shit for free tbh sucks but thats what i did its exploitative but gotta do what u gotta do sometimes

b1mind•7mo ago

Use Next or Remix We been through this If you going to use Svelte use Kit If you going to use Vue use Nuxt

CDLOP•7mo ago

I get that b1, my question was, is there any point in trying to do that idea without routing or is that just making something simple, complicated

b1mind•7mo ago

You could just have a component that changes state with no URL change Like tabs But not tabs 😂

CDLOP•7mo ago

I think that's what I'm getting at

b1mind•7mo ago

React router sux 🥲

CDLOP•7mo ago

so I have that intro page, and when I click on say... "transition" it replaces that text with the transition element/component but doesn't change page yea I see that

b1mind•7mo ago

But you could use it ig too like old CRAp days of old Lol React and animations is what first turned me off to react.... Gl Chances are you will want to use Framer motion, or Gsaps new hook they made just for React (cause you gotta lol)

CDLOP•7mo ago

I don't even care for animations in react man I was just excited to mess around with transitions/animations even at a very basic level lol now I kinda cbf with it 🤣

b1mind•7mo ago

Then do it out side React Then inside

CDLOP•7mo ago

true I should've just opened up a damn html and css file and went from there lol, dunno why I keep defaulting to a framework ugh, anyway closing this, thanks for coming to my TEDtalk https://github.com/callum-laing/the-playground much better 🙂 wayy easier to handle routing etc, feels very similar to sveltekit so was very easy to adapt to

Gaming

Programming

React/Vite -> Trying to connect routes & components together through App.jsx