React default route nested subwebs

Source: Internet
Author: User
Import react from ' react ' import {Router, Redirect,route, indexroute,browserhistory,hashhistory} from ' React-router ' I Mport App from '. /containers/app ' Import home from '. /containers/home ' Import Phone from '. /containers/phone/phone ' Import Ditu from '. /containers/ditu/ditu ' Import Anli from '. /containers/anli/anli ' Import Homeindex from '. /containers/homeindex/homeindex ' Import List from '. /containers/list ' Import Detail from '. /containers/detail ' import about from '. /containers/about/about ' Import News from '. /containers/news/news ' Import team from '. /containers/team/team ' Import NotFound from '. /containers/notfound ' class Routemap extends React.component {render () {return (<router H  istory={browserhistory}> <redirect from= "/" to= "/homeindex"/> <route ' path= '/' component={app}> <route path= '/homeindex ' component={home}> <inde Xroute Component={homeindex}/> <route path= '/home/about ' component={about}/> & Lt
                    Route path= '/home/news ' component={news}/> <route path= '/home/team ' component={team}/> </Route> <route path= '/list ' component={list}/> < Route path= '/phone ' component={phone}> </Route> <route path= '/ditu ' Co mponent={ditu}/> <route path= '/anli ' component={anli}/> <route '/ Detail/:id ' component={detail}/> <route path= "*" Component={notfound}/> </ Route> </Router>}} Export default Routemap Total entry route: <div classname= "Footer Bordert
	            		Op "> <link to="/homeindex "activeclassname=" routeractive "classname=" Footerrouter "> <span Classname= "bAr1 "></span> home </Link> <link to="/phone "Activeclassname=" R
	            	Outeractive "classname=" Footerrouter "> <span classname=" bar2 "></span> Telephone
	            		</Link> <link to= "/ditu" activeclassname= "routeractive" classname= "Footerrouter" > <span classname= "BAR3" ></span> map </Link> <lin K to= "/anli" activeclassname= "routeractive" classname= "Footerrouter" > <span classname= "BAR4" >< /SPAN> Case </Link> </div> First sub route: Import react from ' react ' import {Link,indexlink} from ' React-router ' import {browserhistory} from ' React-router ' import Banner from ' ... /.. /contents/banner/banner ' class Homeindex extends React.component {render () {return (<div C
             Lassname= "Content" >   <Banner/> <div classname= "Navul" > <link to= "/home/about" classname= "Navlis"
	            	T "> <span classname=" bar1 "></span> About us </Link>
	            		<link to= "/home/news" classname= "navlist" > <span classname= "bar2" ></span> Home Improvement News </Link> <link to= "/anli" classname= "navlist" > <span cl Assname= "BAR3" ></span> case show </Link> <link to= "/home/team" CLA Ssname= "Navlist" > <span classname= "BAR4" ></span> design team </link > </div> </div>)} Export default Homeindex home file: Import react From ' react ' import {browserhistory} from ' React-router ' class home extends React.component {render () {R Eturn (<div> {This.props.children} </div>}} Export default home principle is to make the home parent component For a container, where one of the subpages completes the jump Indexroute after using this, if you want to embed a child route under the default route, you will find that the default route after clicking Jump loses its active state, so you are not using this now. Directly using react route redirection, the default address is directed to the home page that needs to be displayed.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.