Passing Props in React Router - reactjs

Question

I am having difficulty passing props via react router. Based on my understanding, there is a new way to pass props in React Router V6.
However, the props is still not showing up. Can some one take a look? thank you.
The props I am trying to pass is <Route path="/products" element={< Products sortBy={'newest'} />} />
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {BrowserRouter} from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>, document.getElementById('root'));
registerServiceWorker();
App.js
import ReactDOM from "react-dom";
import NavBar from "./components/navbar";
import Products from "./components/products";
import Posts from "./components/posts";
import Home from "./components/home";
import Dashboard from "./components/admin/dashboard";
import ProductDetails from "./components/productDetails";
import NotFound from "./components/notFound";
import {Routes, Route} from 'react-router-dom'
import "./App.css";
class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="content">
<Routes>
<Route path="/products" element={< Products sortBy={'newest'} />} />
<Route path="/posts/2018/06" element={<Posts/>} />
<Route path="/admin" element={<Dashboard/>} />
<Route path="/" element={<Home/>} />
</Routes>
</div>
</div>
);
}
}
export default App;
Product.js
import React, { Component } from "react";
class Products extends Component {
state = {
products: [
{ id: 1, name: "Product 1" },
{ id: 2, name: "Product 2" },
{ id: 3, name: "Product 3" }
]
};
render() {
return (
<div>
<h1>Products</h1>
<ul>
{this.state.products.map(product => (
<li key={product.id}>
<a href={`/products/${product.id}`}>{product.name}</a>
</li>
))}
</ul>
</div>
);
}
}
export default Products;

Answer 1

You are passing the props correctly. Can you please attach the code inside your <Products/> component?
Also, to enable routing in your react project, you need the implementations BrowserRouter, Routes and Route (React Basis Tutorials, BrowserRouter, Switch and Routes). In your code BrowserRouter is missing:
import ReactDOM from "react-dom";
import NavBar from "./components/navbar";
import Products from "./components/products";
import Posts from "./components/posts";
import Home from "./components/home";
import Dashboard from "./components/admin/dashboard";
import ProductDetails from "./components/productDetails";
import NotFound from "./components/notFound";
// Here import BrowserRouter
import {BrowserRouter as Router,Routes, Route} from 'react-router-dom'
import "./App.css";
class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="content">
//Wrap Routes inside BrowserRouter (imported as Router)
<Router>
<Routes>
<Route path="/products" element={< Products sortBy={'newest'} />} />
<Route path="/posts/2018/06" element={<Posts/>} />
<Route path="/admin" element={<Dashboard/>} />
<Route path="/" element={<Home/>} />
</Routes>
<Router>
</div>
</div>
);
}
}
export default App;

Answer 2

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {BrowserRouter} from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>, document.getElementById('root'));
registerServiceWorker();