Make Route for multiple variables using React Router - reactjs

Question

I'm trying to make multiple pages about some game character using React Router
For multiple pages, I want to load data from firebase and insert the data into pages.
the all character page formats are same and just need to change detailed data
For example,
we have
character 'a' : Age : 12, Gender : Male
character 'b' : Age: 13, Gender : Female
and each character page would need to show the character's data with loaded data
I need to show the data of only one character at one page.
Here is my code about routing
function App() {
useEffect(() => {
async function getFromDocs() {
const data = await db
.collection('Character')
.doc(curChar)
.get()
.then((snap) => {
return snap.data() as CharProps;
});
setData(data);
}
getFromDocs();
}, [curChar]);
const onCharChange = (text: string) => {
setCurChar(text);
};
return (
<>
<title>Tekken_info 0.1.0</title>
<GlobalStyle />
<Wrapper>
<PageContent>
<Switch>
<Route path="/" exact={true} component={Home} />
<Route path="/Data" exact={true}>
<Page data={data} />
</Route>
</Switch>
</PageContent>
</Wrapper>
</>
);
}
export default App;
But how I did temporarily was not quite satisfying...
I load character data with useState and load it in to '/Data' page
I don't think this is good way and want to make one route for characters.
For example
when we access to '/a' load data about a only 'a'....
If anything you don't understand about my description and question
let me know

Answer 1

Instead of passing the data as props to Page component, You could move the useEffect into the page itself. so that only curChar is a route path variable and can be accessed inside the page something like:
/Data/curChar
Change the path to
path="/Data/:curChar"
Inside the page
const Page = () => {
let {
curChar
} = useParams();
//move the useEffect here.
useEffect(() => {
async function getFromDocs() {
const data = await db
.collection('Character')
.doc(curChar)
.get()
.then((snap) => {
return snap.data() as CharProps;
});
setData(data);
}
getFromDocs();
}, [curChar]);
return <div > Now showing details of {
curChar
} < /div>;
}