title: Get id using useParams hook in functional component - react router dom v6
body: <p>I am following Colt Steele's React course. Sadly, the course is outdated so I chose to migrate to the latest versions of libraries myself.</p>
  <p>Coming to the point, I am now facing this error where I am not able to extract URL params using the useParams hook in my functional component. I am pasting my code below for the community to check.</p>
  <p><strong>App.js</strong></p>
  <pre><code>import Palette from './Palette';
  import seedPalettes from './assets/seedPalettes'
  import './css/App.css'
  import { generatePalette } from './assets/colorHelpers';
  import { Routes, Route, Link, useParams } from 'react-router-dom';
  
  function App() {
  
    const { id } = useParams()
    const findPalette = id =&gt; {
      return seedPalettes.find(function (palette) {
        return palette.id == id;
      })
    }
  
    console.log(id);
  
    return (
      &lt;div className='App'&gt;
        &lt;Routes&gt;
          &lt;Route path='/' element={&lt;h1&gt;Welcome Home&lt;/h1&gt;} /&gt;
          &lt;Route path='/palette/:id' element={&lt;Palette palette={generatePalette(findPalette(id))} /&gt;} /&gt;
        &lt;/Routes&gt;
  
        {/* &lt;Link to='/palette'&gt;See Palette&lt;/Link&gt; */}
        {/* &lt;Palette palette={generatePalette(seedPalettes[4])} /&gt; */}
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><strong>seedPalettes.js</strong></p>
  <pre><code>export default [
      {
          paletteName: &quot;Material UI Colors&quot;,
          id: &quot;material-ui-colors&quot;,
          emoji: &quot;&quot;,
          colors: [
              { name: &quot;red&quot;, color: &quot;#F44336&quot; },
              { name: &quot;pink&quot;, color: &quot;#E91E63&quot; },
              { name: &quot;purple&quot;, color: &quot;#9C27B0&quot; },
              { name: &quot;deeppurple&quot;, color: &quot;#673AB7&quot; },
              { name: &quot;indigo&quot;, color: &quot;#3F51B5&quot; },
              { name: &quot;blue&quot;, color: &quot;#2196F3&quot; },
              { name: &quot;lightblue&quot;, color: &quot;#03A9F4&quot; },
              { name: &quot;cyan&quot;, color: &quot;#00BCD4&quot; },
              { name: &quot;teal&quot;, color: &quot;#009688&quot; },
              { name: &quot;green&quot;, color: &quot;#4CAF50&quot; },
              { name: &quot;lightgreen&quot;, color: &quot;#8BC34A&quot; },
              { name: &quot;lime&quot;, color: &quot;#CDDC39&quot; },
              { name: &quot;yellow&quot;, color: &quot;#FFEB3B&quot; },
              { name: &quot;amber&quot;, color: &quot;#FFC107&quot; },
              { name: &quot;orange&quot;, color: &quot;#FF9800&quot; },
              { name: &quot;deeporange&quot;, color: &quot;#FF5722&quot; },
              { name: &quot;brown&quot;, color: &quot;#795548&quot; },
              { name: &quot;grey&quot;, color: &quot;#9E9E9E&quot; },
              { name: &quot;bluegrey&quot;, color: &quot;#607D8B&quot; }
          ]
      },
      {
          paletteName: &quot;Flat UI Colors v1&quot;,
          id: &quot;flat-ui-colors-v1&quot;,
          emoji: &quot;&quot;,
          colors: [
              { name: &quot;Turquoise&quot;, color: &quot;#1abc9c&quot; },
              { name: &quot;Emerald&quot;, color: &quot;#2ecc71&quot; },
              { name: &quot;PeterRiver&quot;, color: &quot;#3498db&quot; },
              { name: &quot;Amethyst&quot;, color: &quot;#9b59b6&quot; },
              { name: &quot;WetAsphalt&quot;, color: &quot;#34495e&quot; },
              { name: &quot;GreenSea&quot;, color: &quot;#16a085&quot; },
              { name: &quot;Nephritis&quot;, color: &quot;#27ae60&quot; },
              { name: &quot;BelizeHole&quot;, color: &quot;#2980b9&quot; },
              { name: &quot;Wisteria&quot;, color: &quot;#8e44ad&quot; },
              { name: &quot;MidnightBlue&quot;, color: &quot;#2c3e50&quot; },
              { name: &quot;SunFlower&quot;, color: &quot;#f1c40f&quot; },
              { name: &quot;Carrot&quot;, color: &quot;#e67e22&quot; },
              { name: &quot;Alizarin&quot;, color: &quot;#e74c3c&quot; },
              { name: &quot;Clouds&quot;, color: &quot;#ecf0f1&quot; },
              { name: &quot;Concrete&quot;, color: &quot;#95a5a6&quot; },
              { name: &quot;Orange&quot;, color: &quot;#f39c12&quot; },
              { name: &quot;Pumpkin&quot;, color: &quot;#d35400&quot; },
              { name: &quot;Pomegranate&quot;, color: &quot;#c0392b&quot; },
              { name: &quot;Silver&quot;, color: &quot;#bdc3c7&quot; },
              { name: &quot;Asbestos&quot;, color: &quot;#7f8c8d&quot; }
          ]
      },
      {
          paletteName: &quot;Flat UI Colors Dutch&quot;,
          id: &quot;flat-ui-colors-dutch&quot;,
          emoji: &quot;&quot;,
          colors: [
              { name: &quot;Sunflower&quot;, color: &quot;#FFC312&quot; },
              { name: &quot;Energos&quot;, color: &quot;#C4E538&quot; },
              { name: &quot;BlueMartina&quot;, color: &quot;#12CBC4&quot; },
              { name: &quot;LavenderRose&quot;, color: &quot;#FDA7DF&quot; },
              { name: &quot;BaraRose&quot;, color: &quot;#ED4C67&quot; },
              { name: &quot;RadiantYellow&quot;, color: &quot;#F79F1F&quot; },
              { name: &quot;AndroidGreen&quot;, color: &quot;#A3CB38&quot; },
              { name: &quot;MediterraneanSea&quot;, color: &quot;#1289A7&quot; },
              { name: &quot;LavenderTea&quot;, color: &quot;#D980FA&quot; },
              { name: &quot;VerryBerry&quot;, color: &quot;#B53471&quot; },
              { name: &quot;PuffinsBill&quot;, color: &quot;#EE5A24&quot; },
              { name: &quot;PixelatedGrass&quot;, color: &quot;#009432&quot; },
              { name: &quot;MerchantMarineBlue&quot;, color: &quot;#0652DD&quot; },
              { name: &quot;ForgottenPurple&quot;, color: &quot;#9980FA&quot; },
              { name: &quot;HollyHock&quot;, color: &quot;#833471&quot; },
              { name: &quot;RedPigment&quot;, color: &quot;#EA2027&quot; },
              { name: &quot;TurkishAqua&quot;, color: &quot;#006266&quot; },
              { name: &quot;20000LeaguesUnderTheSea&quot;, color: &quot;#1B1464&quot; },
              { name: &quot;CircumorbitalRing&quot;, color: &quot;#5758BB&quot; },
              { name: &quot;MagentaPurple&quot;, color: &quot;#6F1E51&quot; }
          ]
      },
      {
          paletteName: &quot;Flat UI Colors American&quot;,
          id: &quot;flat-ui-colors-american&quot;,
          emoji: &quot;&quot;,
          colors: [
              { name: &quot;LightGreenishBlue&quot;, color: &quot;#55efc4&quot; },
              { name: &quot;FadedPoster&quot;, color: &quot;#81ecec&quot; },
              { name: &quot;GreenDarnerTail&quot;, color: &quot;#74b9ff&quot; },
              { name: &quot;ShyMoment&quot;, color: &quot;#a29bfe&quot; },
              { name: &quot;CityLights&quot;, color: &quot;#dfe6e9&quot; },
              { name: &quot;MintLeaf&quot;, color: &quot;#00b894&quot; },
              { name: &quot;RobinsEggBlue&quot;, color: &quot;#00cec9&quot; },
              { name: &quot;ElectronBlue&quot;, color: &quot;#0984e3&quot; },
              { name: &quot;ExodusFruit&quot;, color: &quot;#6c5ce7&quot; },
              { name: &quot;SoothingBreeze&quot;, color: &quot;#b2bec3&quot; },
              { name: &quot;SourLemon&quot;, color: &quot;#ffeaa7&quot; },
              { name: &quot;FirstDate&quot;, color: &quot;#fab1a0&quot; },
              { name: &quot;PinkGlamour&quot;, color: &quot;#ff7675&quot; },
              { name: &quot;Pico8Pink&quot;, color: &quot;#fd79a8&quot; },
              { name: &quot;AmericanRiver&quot;, color: &quot;#636e72&quot; },
              { name: &quot;BrightYarrow&quot;, color: &quot;#fdcb6e&quot; },
              { name: &quot;OrangeVille&quot;, color: &quot;#e17055&quot; },
              { name: &quot;Chi-Gong&quot;, color: &quot;#d63031&quot; },
              { name: &quot;PrunusAvium&quot;, color: &quot;#e84393&quot; },
              { name: &quot;DraculaOrchid&quot;, color: &quot;#2d3436&quot; }
          ]
      },
      {
          paletteName: &quot;Flat UI Colors Aussie&quot;,
          id: &quot;flat-ui-colors-aussie&quot;,
          emoji: &quot;&quot;,
          colors: [
              { name: &quot;Beekeeper&quot;, color: &quot;#f6e58d&quot; },
              { name: &quot;SpicedNectarine&quot;, color: &quot;#ffbe76&quot; },
              { name: &quot;PinkGlamour&quot;, color: &quot;#ff7979&quot; },
              { name: &quot;JuneBud&quot;, color: &quot;#badc58&quot; },
              { name: &quot;CoastalBreeze&quot;, color: &quot;#dff9fb&quot; },
              { name: &quot;Turbo&quot;, color: &quot;#f9ca24&quot; },
              { name: &quot;QuinceJelly&quot;, color: &quot;#f0932b&quot; },
              { name: &quot;CarminePink&quot;, color: &quot;#eb4d4b&quot; },
              { name: &quot;PureApple&quot;, color: &quot;#6ab04c&quot; },
              { name: &quot;HintOfIcePack&quot;, color: &quot;#c7ecee&quot; },
              { name: &quot;MiddleBlue&quot;, color: &quot;#7ed6df&quot; },
              { name: &quot;Heliotrope&quot;, color: &quot;#e056fd&quot; },
              { name: &quot;ExodusFruit&quot;, color: &quot;#686de0&quot; },
              { name: &quot;DeepKoamaru&quot;, color: &quot;#30336b&quot; },
              { name: &quot;SoaringEagle&quot;, color: &quot;#95afc0&quot; },
              { name: &quot;GreenlandGreen&quot;, color: &quot;#22a6b3&quot; },
              { name: &quot;SteelPink&quot;, color: &quot;#be2edd&quot; },
              { name: &quot;Blurple&quot;, color: &quot;#4834d4&quot; },
              { name: &quot;DeepCove&quot;, color: &quot;#130f40&quot; },
              { name: &quot;WizardGrey&quot;, color: &quot;#535c68&quot; }
          ]
      },
      {
          paletteName: &quot;Flat UI Colors British&quot;,
          id: &quot;flat-ui-colors-british&quot;,
          emoji: &quot;&quot;,
          colors: [
              { name: &quot;ProtossPylon&quot;, color: &quot;#00a8ff&quot; },
              { name: &quot;Periwinkle&quot;, color: &quot;#9c88ff&quot; },
              { name: &quot;Rise-N-Shine&quot;, color: &quot;#fbc531&quot; },
              { name: &quot;DownloadProgress&quot;, color: &quot;#4cd137&quot; },
              { name: &quot;Seabrook&quot;, color: &quot;#487eb0&quot; },
              { name: &quot;VanaDylBlue&quot;, color: &quot;#0097e6&quot; },
              { name: &quot;MattPurple&quot;, color: &quot;#8c7ae6&quot; },
              { name: &quot;NanohanachaGold&quot;, color: &quot;#e1b12c&quot; },
              { name: &quot;SkirretGreen&quot;, color: &quot;#44bd32&quot; },
              { name: &quot;Naval&quot;, color: &quot;#40739e&quot; },
              { name: &quot;NasturcianFlower&quot;, color: &quot;#e84118&quot; },
              { name: &quot;LynxWhite&quot;, color: &quot;#f5f6fa&quot; },
              { name: &quot;BlueberrySoda&quot;, color: &quot;#7f8fa6&quot; },
              { name: &quot;MazarineBlue&quot;, color: &quot;#273c75&quot; },
              { name: &quot;BlueNights&quot;, color: &quot;#353b48&quot; },
              { name: &quot;HarleyOrange&quot;, color: &quot;#c23616&quot; },
              { name: &quot;HintOfPensive&quot;, color: &quot;#dcdde1&quot; },
              { name: &quot;ChainGangGrey&quot;, color: &quot;#718093&quot; },
              { name: &quot;PicoVoid&quot;, color: &quot;#192a56&quot; },
              { name: &quot;ElectroMagnetic&quot;, color: &quot;#2f3640&quot; }
          ]
      },
      {
          paletteName: &quot;Flat UI Colors Spanish&quot;,
          id: &quot;flat-ui-colors-spanish&quot;,
          emoji: &quot;&quot;,
          colors: [
              { name: &quot;JacksonsPurple&quot;, color: &quot;#40407a&quot; },
              { name: &quot;C64Purple&quot;, color: &quot;#706fd3&quot; },
              { name: &quot;SwanWhite&quot;, color: &quot;#f7f1e3&quot; },
              { name: &quot;SummerSky&quot;, color: &quot;#34ace0&quot; },
              { name: &quot;CelestialGreen&quot;, color: &quot;#33d9b2&quot; },
              { name: &quot;LuckyPoint&quot;, color: &quot;#2c2c54&quot; },
              { name: &quot;Liberty&quot;, color: &quot;#474787&quot; },
              { name: &quot;HotStone&quot;, color: &quot;#aaa69d&quot; },
              { name: &quot;DevilBlue&quot;, color: &quot;#227093&quot; },
              { name: &quot;PalmSpringsSplash&quot;, color: &quot;#218c74&quot; },
              { name: &quot;FlourescentRed&quot;, color: &quot;#ff5252&quot; },
              { name: &quot;SyntheticPumpkin&quot;, color: &quot;#ff793f&quot; },
              { name: &quot;CrocodileTooth&quot;, color: &quot;#d1ccc0&quot; },
              { name: &quot;MandarinSorbet&quot;, color: &quot;#ffb142&quot; },
              { name: &quot;SpicedButterNut&quot;, color: &quot;#ffda79&quot; },
              { name: &quot;EyeOfNewt&quot;, color: &quot;#b33939&quot; },
              { name: &quot;ChileanFire&quot;, color: &quot;#cd6133&quot; },
              { name: &quot;GreyPorcelain&quot;, color: &quot;#84817a&quot; },
              { name: &quot;AlamedaOchre&quot;, color: &quot;#cc8e35&quot; },
              { name: &quot;Desert&quot;, color: &quot;#ccae62&quot; }
          ]
      },
      {
          paletteName: &quot;Flat UI Colors Indian&quot;,
          id: &quot;flat-ui-colors-indian&quot;,
          emoji: &quot;&quot;,
          colors: [
              { name: &quot;OrchidOrange&quot;, color: &quot;#FEA47F&quot; },
              { name: &quot;SpiroDiscoBall&quot;, color: &quot;#25CCF7&quot; },
              { name: &quot;HoneyGlow&quot;, color: &quot;#EAB543&quot; },
              { name: &quot;SweetGarden&quot;, color: &quot;#55E6C1&quot; },
              { name: &quot;FallingStar&quot;, color: &quot;#CAD3C8&quot; },
              { name: &quot;RichGardenia&quot;, color: &quot;#F97F51&quot; },
              { name: &quot;ClearChill&quot;, color: &quot;#1B9CFC&quot; },
              { name: &quot;WhitePepper&quot;, color: &quot;#F8EFBA&quot; },
              { name: &quot;Keppel&quot;, color: &quot;#58B19F&quot; },
              { name: &quot;ShipsOfficer&quot;, color: &quot;#2C3A47&quot; },
              { name: &quot;FieryFuchsia&quot;, color: &quot;#B33771&quot; },
              { name: &quot;BlueBell&quot;, color: &quot;#3B3B98&quot; },
              { name: &quot;GeorgiaPeach&quot;, color: &quot;#FD7272&quot; },
              { name: &quot;OasisStream&quot;, color: &quot;#9AECDB&quot; },
              { name: &quot;BrightUbe&quot;, color: &quot;#D6A2E8&quot; },
              { name: &quot;MagentaPurple&quot;, color: &quot;#6D214F&quot; },
              { name: &quot;EndingNavyBlue&quot;, color: &quot;#182C61&quot; },
              { name: &quot;SasquatchSocks&quot;, color: &quot;#FC427B&quot; },
              { name: &quot;PineGlade&quot;, color: &quot;#BDC581&quot; },
              { name: &quot;HighlighterLavender&quot;, color: &quot;#82589F&quot; }
          ]
      },
      {
          paletteName: &quot;Flat UI Colors French&quot;,
          id: &quot;flat-ui-colors-french&quot;,
          emoji: &quot;&quot;,
          colors: [
              { name: &quot;FlatFlesh&quot;, color: &quot;#fad390&quot; },
              { name: &quot;MelonMelody&quot;, color: &quot;#f8c291&quot; },
              { name: &quot;Livid&quot;, color: &quot;#6a89cc&quot; },
              { name: &quot;Spray&quot;, color: &quot;#82ccdd&quot; },
              { name: &quot;ParadiseGreen&quot;, color: &quot;#b8e994&quot; },
              { name: &quot;SquashBlossom&quot;, color: &quot;#f6b93b&quot; },
              { name: &quot;MandarinRed&quot;, color: &quot;#e55039&quot; },
              { name: &quot;AzraqBlue&quot;, color: &quot;#4a69bd&quot; },
              { name: &quot;Dupain&quot;, color: &quot;#60a3bc&quot; },
              { name: &quot;AuroraGreen&quot;, color: &quot;#78e08f&quot; },
              { name: &quot;IcelandPoppy&quot;, color: &quot;#fa983a&quot; },
              { name: &quot;TomatoRed&quot;, color: &quot;#eb2f06&quot; },
              { name: &quot;YueGuangBlue&quot;, color: &quot;#1e3799&quot; },
              { name: &quot;GoodSamaritan&quot;, color: &quot;#3c6382&quot; },
              { name: &quot;Waterfall&quot;, color: &quot;#38ada9&quot; },
              { name: &quot;CarrotOrange&quot;, color: &quot;#e58e26&quot; },
              { name: &quot;JalapenoRed&quot;, color: &quot;#b71540&quot; },
              { name: &quot;DarkSapphire&quot;, color: &quot;#0c2461&quot; },
              { name: &quot;ForestBlues&quot;, color: &quot;#0a3d62&quot; },
              { name: &quot;ReefEncounter&quot;, color: &quot;#079992&quot; }
          ]
      }
  ];
  </code></pre>
  <p><strong>colorHelpers.js</strong></p>
  <p>This is where I am creating my palette from a seed palette.</p>
  <pre><code>import chroma from 'chroma-js';
  
  const levels = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
  
  const generatePalette = (starterPalette) =&gt; {
      let newPalette = {
          paletteName: starterPalette.paletteName,
          id: starterPalette.id,
          emoji: starterPalette.emoji,
          colors: {}
      };
  
      for (let level of levels) {
          newPalette.colors[level] = [];
      }
  
      for (let color of starterPalette.colors) {
          let scale = generateScale(color.color, 10).reverse();
          for (let i in scale) {
              newPalette.colors[levels[i]].push({
                  name: `${color.name} ${levels[i]}`,
                  id: color.name.toLowerCase().replace(/ /g, '-'),
                  hex: scale[i],
                  rgb: chroma(scale[i]).css().replace(/,/g, ', '),
                  rgba: chroma(scale[i]).css().replace('rgb', 'rgba').replace(')', ',1.0)').replace(/,/g, ', ')
              })
          }
      }
  
      return newPalette;
  }
  
  const getRange = (hexColor) =&gt; {
      const end = '#fff';
  
      return [
          chroma(hexColor).darken(1.4).hex(),
          hexColor,
          end
      ]
  }
  
  const generateScale = (hexColor, numOfColors) =&gt; {
      return chroma.scale(getRange(hexColor)).mode('lab').colors(numOfColors);
  }
  
  export { generatePalette };
  </code></pre>
  <p>Please help me, as a beginner, it is very overwhelming :(. Also, sorry for the bulky code blocks.</p>