package Ġexample Ċ Ċ import Ġreact . FC Ċ import Ġreact . Props Ċ import Ġreact . create Ċ import Ġreact . dom . html . React HTML . div Ċ import Ġreact . dom . html . React HTML . h 2 Ċ import Ġreact . dom . html . React HTML . h 3 Ċ import Ġreact . dom . html . React HTML . li Ċ import Ġreact . dom . html . React HTML . ul Ċ import Ġreact . router . Route Ċ import Ġreact . router . Routes Ċ import Ġreact . router . dom . Browser Router Ċ import Ġreact . router . dom . Link Ċ import Ġreact . router . use Location Ċ import Ġreact . router . use Params Ċ Ċ val ĠHome Ġ= ĠFC < Props > Ġ{ ĊĠĠĠ Ġh 2 Ġ{ ĊĠĠĠĠĠĠĠ Ġ+" Home " ĊĠĠĠ Ġ} Ċ } Ċ Ċ val ĠAbout Ġ= ĠFC < Props > Ġ{ ĊĠĠĠ Ġh 2 Ġ{ ĊĠĠĠĠĠĠĠ Ġ+" About " ĊĠĠĠ Ġ} Ċ } Ċ Ċ val ĠTop ics Ġ= ĠFC < Props > Ġ{ ĊĠĠĠ Ġval Ġlocation Ġ= Ġuse Location () ĊĊĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠ Ġh 2 Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Topics " ĊĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠ Ġul Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġli Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠLink Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġto Ġ= Ġ"/ components " ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Components " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġli Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠLink Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġto Ġ= Ġ"/ props - v - state " ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Props Ġv . ĠState " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠ ĠRoutes Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ ĠRoute Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġpath Ġ= Ġ"${ location . pathname }/ : topic Id " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġelement Ġ= ĠTopic . create () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ ĠRoute Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġpath Ġ= Ġlocation . pathname ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġelement Ġ= Ġh 3 . create Ġ{ Ġ+" Please Ġselect Ġa Ġtopic ." Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ Ċ val ĠTopic Ġ= ĠFC < Props > Ġ{ ĊĠĠĠ Ġval Ġtopic Id Ġ= Ġuse Params ()[" topic Id "] ĊĠĠĠĠĠĠĠ Ġ?: Ġreturn @ FC ĊĊĠĠĠ Ġh 3 Ġ{ ĊĠĠĠĠĠĠĠ Ġ+" Requested Ġtopic ĠID : Ġ$ topic Id " ĊĠĠĠ Ġ} Ċ } Ċ Ċ val ĠReact Router Dom App Ġ= ĠFC < Props > Ġ{ ĊĠĠĠ ĠBrowser Router Ġ{ ĊĠĠĠĠĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġul Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġli Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠLink Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġto Ġ= Ġ"/" ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Home " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġli Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠLink Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġto Ġ= Ġ"/ about " ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" About " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġli Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠLink Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġto Ġ= Ġ"/ topics " ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Topics " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠ ĠRoutes Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠRoute Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġpath Ġ= Ġ"/ about " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġelement Ġ= ĠAbout . create () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠRoute Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġpath Ġ= Ġ"/ topics " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġelement Ġ= ĠTop ics . create () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠRoute Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġpath Ġ= Ġ"/" ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġelement Ġ= ĠHome . create () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ