import{Switch}from"react-router";import{BrowserRouter,Route,Link}from"react-router-dom";import{RouterasNamesakeRouter,WithNamesake,NamesakeLink,NamesakeRoute}from"react-router-namesake";constButtonLink=({ to, params })=>{return<WithNamesake>{({ routes })=>(<buttononClick={()=>routes.transitionTo(path,params)}>{this.props.children}</button>)}</WithNamesake>;}constApp=()=>(<div><BrowserRouter><Route>{({ history })=>(<NamesakeRouterpush={history.push}routes={{home: "/home",users: "/users",user: "/users/:userId"}}><div><nav><NamesakeLinkto="home">Home</NamesakeLink><NamesakeLinkto="users">users</NamesakeLink><NamesakeLinkto="user"params={{userId: 123}}>
user id 123
</NamesakeLink></nav><NamesakeRouteexactpath='user'><p>This renders for /user/:userId</p></NamesakeRoute><ButtonLinkto='user'params={{userId: 123}}>Go to User 123</ButtonLink><Switch><Routeexactpath="/home"><h2>Home</h2></Route><Routeexactpath="/users"><h2>Users Page</h2></Route><Routeexactpath="/users/:userId"><h2>A User's Page</h2></Route></Switch></div></NamesakeRouter>)}</Route></BrowserRouter></div>);demo
