How Can Use react Router? - reactjs

Question

i have an app component where map over my data an return a component, I want to make app the homepage that displays the component i return
import React, { Component } from "react";
import data from "./data";
import Asteriods from "./components/Asteroids";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Header from "./components/Header";
import "./App.css";
class App extends Component {
state = {
// calculations: [],
asteroids: data,
};
render() {
return (
<div className="space">
<Header />
{this.state.asteroids.map((item) => (
<Asteriods key={item.id} item={item} />
))}
</div>
);
}
}
export default App;
I also have a component that where i want to link to that other component and still pass props to the stock component
import React, { Component } from "react";
import Stock from "./Stock";
class AsteroidDetails extends Component {
render() {
return (
<div className="popup">
<div className="popup\_inner">
<button onClick={this.props.closePopup}>X</button>
<p> - Name: {this.props.asteroid.name}</p>
<p> - Type: {this.props.asteroid.type}</p>
<p> - Mass: {this.props.asteroid.mass}</p>
Link to vieuw stock
<Stock
// chemPerDay={this.props.chemPerDay}
{...this.props}
// remainingMassPerday={this.props.remainingMassPerday}
// asteroidYieldPerDay={this.props.asteroidYieldPerDay}
// remainingMpct={this.props.remainingMpct}
/>
</div>
</div>
);
}
}
export default AsteroidDetails;
how can i use react router in both of these cases ?