reactjs - React Router Dom routes and sub-routes -

react-router-dom / reactjs beginner in general here.

i've got working router code think can cleaned up, attempts @ doing have failed far. there gaps in knowledge in area. i've paged through similar questions has helped me expand understanding, haven't connected dots @ point.

the following code seems work fine, irked repeated "/admin" prefix admin routes.

<browserrouter>     <div>         <div classname="nav-bar">             <ul>                 <li><link to="/admin">home</link></li>                 <li><link to="/admin/content">content</link></li>                 ...             </ul>         </div>         <div classname="nav-content">             <route exact path="/admin" component={adminhome}/>             <route path="/admin/content" component={admincontent}/>             ...         </div>     </div> </browserrouter> 

however, moving "nested" routes sub-route elements doesn't work. javascript console spits out error message "warning: should not use , in same route; ignored."

<route exact path="/admin" component={adminhome}>     <route path="/content" component={admincontent}/>     ... </route> 

any suggestions appreciated. i've read through number of answers, , found options in which, example, use <route path="/admin/:whatever" render={() => (...)}/>, @ time doesn't seem right path go down.

the reason being, need route parameters further down tree, e.g. uri along lines of /admin/content/:content_type/:identifier, , ideally admincontent component agnostic parent route match.

please feel free let me know if i'm way off base, , if there documentation believe show me light love read it.

cheers , again!

thanks christopher above providing link documentation.

as per documentation linked, following changes , running:

{/* top-level route declaration */} <div classname="nav-content">     {/* note removal of exact property here */}     <route path="/admin" component={adminroutes}/> </div>  {/* "sub-routes" (possible poor nomenclature) */} const adminroutes = ({ match }) => (     <div>         {/* note addition of exact property here */}         <route exact path={match.url} component={adminhome}/>         <route path={match.url + "/content"} component={admincontent}/>         <route path={match.url + "/data-store"} component={admindatastore}/>         <route path={match.url + "/search"} component={adminsearch}/>         <route path={match.url + "/communicate"} component={admincommunicate}/>         <route path={match.url + "/promote"} component={adminpromote}/>         <route path={match.url + "/measure"} component={adminmeasure}/>         <route path={match.url + "/experimental"} component={adminexperimental}/>     </div> ) 

to expand bit further: in examples i've seen far using nested routes , inbound "match" parameter, have been implemented above, i.e. const x = ({match}) => (...).

but possible, , potentially useful, define true react.component subclass, in param match still available via this.props.

class content extends react.component {      // usage example     render() {          // `match` available via inbound props         console.log(this.props.match);          return (             <p>match {this.props.match.url}</p>         )     } } 

i'd re-iterate @ point reactjs beginner... please let me know if i'm doing stupid :)