React pass variable from route path (dynamic variable) to element

Question

i'm new in react and i'm trying to pass variable from Route to element. I was trying to pass it like userId={this.props.match.params.userId} but from console i saw that the value is on Router and not on Home.

I'm trying this on [email protected] and [email protected].

My url is http://localhost:3000/123/boards and i would like to pass 123 to Home Component

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Board from './components/Board'
import data from './samlpeData'
import Home from './components/pages/Home'
import { BrowserRouter, Routes, Route   } from 'react-router-dom'
import PageNotFound from './components/pages/PageNotFound';


class App extends React.Component {
  state = {
    boards: []
  }
  componentDidMount(){
    this.setState({ boards: data.boards })
  }
  createNewBoard = board => {
    this.setState({ boards: [...this.state.boards, board]}) 
  }
  render() {
    return (
      <div>
        <BrowserRouter>
          <Routes>
          <Route 
            path="/:userId/boards" 
            element={
              <Home 
              exact
              userId="should_be_pass_from_path_:userId" //here i would like to pass my variable
              boards={this.state.boards} 
              createNewBoard = {this.createNewBoard}
              />
            }
            />
     
            <Route path="/board/:boardId" element={<Board/>} />
            <Route path="*" element={<PageNotFound/>}/>
          </Routes>
          </BrowserRouter>
      </div>
    );
  }

}

export default App;

Thanks for any help.