React making url dynamic

Question

So I want to make a URL a bit more dynamic, I set up this example for clarity. I have three buttons, home, about and game. I've set them up using params i.ex '/:home'. What I want to do is make it so that the routes are connected to a variable so that React dont confuse home, about and game with each other. Here is my first component with buttons to change the url.

import React from 'react'
import { useNavigate } from 'react-router-dom'

const Buttons = () => {

  const navigate = useNavigate()
  let home = '/home'
  let about = '/about'
  let game = '/game'

  return (

    <div>Buttons
        <button onClick={()=>navigate(home)}>Home </button>
        <button onClick={()=>navigate(about)}>About </button>
        <button onClick={()=>navigate(game)}>Game </button>
    </div>
  )
}

export default Buttons

Here is my routing

import React from 'react'
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
import Buttons from '../components/buttons/Buttons'
import About from '../pages/About/About'
import Game from '../pages/Game/Game'
import Home from '../pages/Home/Home'

const Routing = () => {
  return (
    <Router>
      <Buttons/>
        <Routes>
            <Route path='/:home' element={<Home />}/>
            <Route path='/:about'element={<About/>}/>
            <Route path='/:game' element={<Game/>}/>
        </Routes>
    </Router>
  )
}

export default Routing

Should I perhaps useContext and assign variables?

App.js and index.js

import React from 'react'
import './app.css'
import Routing from './routes/Routing'


const App = () => {
  return (
      <div>
          <Routing/>
      </div>
  )
}

export default App

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

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

Thanks in advance!

I mean that I want to somehow use for example variables so that react dont get confused and think /:home and /:game is the same. Hope that makes sense. — Svante Pålsson
– Svante Pålsson, Commented Feb 22, 2022 at 12:39
but this is an example as stated. so i might have 50 different, say categories, that i want to use in a path='/:categorys'. And I need them to allways end up at the right place. — Svante Pålsson
– Svante Pålsson, Commented Feb 22, 2022 at 12:47
well how would you use the variables across components, useContext? — Svante Pålsson
– Svante Pålsson, Commented Feb 22, 2022 at 13:11

TomS · Accepted Answer · 2022-02-22 13:48:10Z

1

You could just create a file like constants.js and create your navigation object that contains something like:

export const url = {
  HOME: '/home',
  ABOUT: '/about',
}

This can then be imported throughout your project and accessed like so:

()=>navigate(url.HOME)

answered Feb 22, 2022 at 13:48

TomS

6815 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Svante Pålsson Over a year ago

Hey, thanks for taking your time. How do you think this would work in this scienario, let's say I have this type of url param: '/:state/:city/:categori/:under-category' And let's say a nav with the different countys and categories. And I'm in the category Fashion and looking on shoes all over the country and my url looks like this. 'localhols:3000/fashion/shoes'. Now I want to change so I can see all shoes in a specific state and city. And I click in my nav on say Nevada => Las Vegas. So I want my url now to read localhost:3000/nevada/las-vegas/fashion/shoes.

Svante Pålsson Over a year ago

basically I want react to understand okey, he choose a state and a city this time and that goes first in the url. instead of adding it to /fashion/shoes/nevada/las-vegas.

TomS Over a year ago

That's a bit off topic from the original question, but look at this answer here about creating dynamic routes: stackoverflow.com/questions/57058879/…

TomS Over a year ago

With regards to having the state/city first. I think you'll need to define two routes, one for no location e.g. /category/sub-category, and another for /state/city/category/sub-category - both can point to the same page/component, but you'll need to pull out the params and make the relevant request.

Collectives™ on Stack Overflow

React making url dynamic

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related