typescript - วิธีแสดงพารามิเตอร์ที่ส่งไปยังคอมโพเนนต์และวิธีให้พารามิเตอร์ที่ไม่บังคับกับคอมโพเนนต์ใน reactjs?

ฉันกำลังพัฒนาเว็บเพจโดยใช้ React กับ TypeScript ใน Visual Studio 2017 และฉันยังใหม่มากกับมัน ฉันกำลังพบปัญหาในการเข้าถึงพารามิเตอร์ที่ส่งไปยังคอมโพเนนต์และการทำให้พารามิเตอร์หนึ่งเป็นทางเลือก ด้านล่างนี้คือโค้ดของฉัน:-

routes.tsx:

export const routes = <Layout>
<Switch>
    <Route path='/home/:id' component={Home} /> //<= this works, but i want id parameter to be optional. I tried (/:id) but the component does not render if i do this.
</Switch>
</Layout>

Home.tsx:

export class Home extends React.Component<RouteComponentProps<{}>, {}> {
public render() {
    console.log(this.props.match.params); //<= I can see the id which i pass in the console
    return <div>
       <h1>{this.props.match.params}<h1> //<= this does not work and gives me a runtime error 'Unhandled rejection Invariant Violation: Objects are not valid as a React child (found: object with keys {id}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons'
   </div>

1) ฉันจะส่งพารามิเตอร์แบบไม่บังคับไปยังคอมโพเนนต์อย่างไร?
2) ฉันจะแสดงพารามิเตอร์ที่ส่งไปยังคอมโพเนนต์ Home ได้อย่างไร?

ความช่วยเหลือใด ๆ จะได้รับความชื่นชม ขอบคุณล่วงหน้า

คำตอบ #1

ใช้ ? แบบนี้เพื่อส่งพารามิเตอร์ที่เป็นทางเลือก:

<Route path="/home/:id?" component={Home}/>

เริ่มอ่านที่นี่เพื่อหาข้อมูลเพิ่มเติม

ในการแสดงตัวแปร ให้ใช้ {this.props.match.params.id} หากคุณต้องการจัดการกรณีที่ไม่มี id สามารถใช้บางอย่างเช่นนี้ได้:

{this.props.match.params.id || 'sorry lol no id is specified'}

เพื่อชี้แจงว่าทำไมคุณถึงได้รับข้อผิดพลาด: "params" เป็นออบเจ็กต์ที่เก็บพารามิเตอร์ทั้งหมด React ไม่รู้ว่าจะต้องแสดงออบเจ็กต์อย่างไร หากคุณต้องการแสดงออบเจ็กต์ คุณสามารถใช้ JSON.stringify(params) แต่ผมคิดว่าไม่ใช่สิ่งที่คุณกำลังมองหา

คำตอบ #2

การใช้ ? ตามที่ @pgsandstrom กล่าวในการส่งพารามิเตอร์ทางเลือกได้ผลสำหรับฉัน

ในการดึงคุณสมบัติ id จาก params สิ่งที่ฉันทำคือสร้างอ็อบเจ็กต์สำหรับ this.props.match.params แล้วใช้อ็อบเจ็กต์นั้นในการดึง id โค้ดต่อไปนี้คือโค้ดที่ฉันใช้:-

let data = Object.create(this.props.match.params);

แล้วก็

data.id

จะดึงไอดีของฉันโดยไม่ทำให้เกิดข้อผิดพลาดในการคอมไพล์ในไทป์สคริปต์