javascript - react redirect to router url after click and display default page -

i have header component like:

class header extends component {   render() {     return (       <div>         <h3><link to="/:one">one</link></h3>         <h3><link to="/:two">two</link></h3>       </div>     )   } }  export default header 

and in app.js:

class app extends component {   render() {     return (       <div>         <header />       </div>     )   } } export default app 

my intention here show header time navbar..

and have router like:

const routes =  (   <route path="/" component={app}>         <route path="/:login" component={login} />         <route path="/:one" component={one} />         <route path="/:two" component={two} />   </route> ) export default routes 

here in header when click on one or two should redirect in page.

also main thing want want header component in every page.. navbar..

in app.js have header component. when go / in browser should show login page default..

i need guide go through this..

i new react

thanks in advance..

1. addition {this.props.children} in app.js this:

class app extends component {   render() {     return (          <div>             <header />             {this.props.children}         </div>     )   } } export default app 

, change routes file

const routes =  (   <route path="/" component={app}>         <route path="/login" component={login} />         <route path="/one" component={one} />         <route path="/two" component={two} />   </route> ) export default routes 

to show header time navbar.

2. simple authentication example

react-router auth example