这是App.tsx 中的代码

import React from 'react';
import styles from './App.module.css';
import{BrowserRouter,Route,Switch} from "react-router-dom"
import {HomePage,SignInPage,RegisterPage, DetailPage} from "./pages"

function App() {
  return (
  <div className={styles.App}>
    <BrowserRouter>
    <Switch>
      <Route exact path="/" component={HomePage}/>
      <Route path="/signin" component={SignInPage} />
      <Route path="/register" component={RegisterPage} />
      <Route path="/detail/:touristRouteId" component={DetailPage} />
      <Route render ={()=><h1>404 not found page go to mars</h1>}/>
    </Switch>

    
    </BrowserRouter>
   
  </div>
  );
}

export default App;

这是DetailPage.tsx 中的代码。

import React from "react";
import {RouteComponentProps} from "react-router-dom"

interface MatchParams {
    touristRouteId: string;
}
export const DetailPage: React.FC<RouteComponentProps<MatchParams>> = (props)=>{
    return (
    <h1> 
        the detail of way of trail, the way ID: {props.match.params}
    </h1>
    )
}

请帮忙看一下。 多谢多谢！