{"id":74433,"date":"2020-01-17T12:50:03","date_gmt":"2020-01-17T07:20:03","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=74433"},"modified":"2024-04-12T14:23:28","modified_gmt":"2024-04-12T08:53:28","slug":"index-routes-and-index-links","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/index-routes-and-index-links\/","title":{"rendered":"Index Routes and Index Links"},"content":{"rendered":"

Index Routes<\/strong><\/p>\n

To illustrate the use case for IndexRoute, imagine the following route config without it:<\/p>\n

<Router><\/p>\n

<Route path=”\/” component={App}><\/p>\n

<Route path=”accounts” component={Accounts}\/><\/p>\n

<Route path=”statements” component={Statements}\/><\/p>\n

<\/Route><\/p>\n

<\/Router><\/p>\n

When the user visits \/, the App component is rendered, but none of the children are, so this.props.children inside of App will be undefined. To render some default UI you could easily do {this.props.children || <Home\/>}.<\/p>\n

But now Home can’t participate in routing, like the onEnter hooks, etc. You render in the same position as Accounts and Statements, so the router allows you to have Home be a first class route component with IndexRoute.<\/p>\n

<Router><\/p>\n

<Route path=”\/” component={App}><\/p>\n

<IndexRoute component={Home}\/><\/p>\n

<Route path=”accounts” component={Accounts}\/><\/p>\n

<Route path=”statements” component={Statements}\/><\/p>\n

<\/Route><\/p>\n

<\/Router><\/p>\n

Now App can render {this.props.children} and we have a first-class route for Home that can participate in routing.<\/p>\n

Index Redirects<\/strong><\/p>\n

Suppose your basic route configuration looks like:<\/p>\n

<Route path=”\/” component={App}><\/p>\n

<Route path=”welcome” component={Welcome} \/><\/p>\n

<Route path=”about” component={About} \/><\/p>\n

<\/Route><\/p>\n

Suppose you want to redirect \/ to \/welcome. To do this, you need to set up an index route that does the redirect. To do this, use the <IndexRedirect> component:<\/p>\n

<Route path=”\/” component={App}><\/p>\n

<IndexRedirect to=”\/welcome” \/><\/p>\n

<Route path=”welcome” component={Welcome} \/><\/p>\n

<Route path=”about” component={About} \/><\/p>\n

<\/Route><\/p>\n

This is equivalent to setting up an index route with just an onEnter hook that redirects the user. You would set this up with plain routes as:<\/p>\n

const routes = [{<\/p>\n

path: ‘\/’,<\/p>\n

component: App,<\/p>\n

indexRoute: { onEnter: (nextState, replace) => replace(‘\/welcome’) },<\/p>\n

childRoutes: [<\/p>\n

{ path: ‘welcome’, component: Welcome },<\/p>\n

{ path: ‘about’, component: About }<\/p>\n

]\n

}]\n

Index Links<\/strong><\/p>\n

If you were to <Link to=”\/”>Home<\/Link> in this app, it would always be active since every URL starts with \/. This is a problem because we’d like to link to Home but only be active if Home is rendered.<\/p>\n

To have a link to \/ that is only active when the Home route is rendered, use <IndexLink to=”\/”>Home<\/IndexLink>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Index Routes To illustrate the use case for IndexRoute, imagine the following route config without it: <Router> <Route path=”\/” component={App}> <Route path=”accounts” component={Accounts}\/> <Route path=”statements” component={Statements}\/> <\/Route> <\/Router> When the user visits \/, the App component is rendered, but none of the children are, so this.props.children inside of App will be undefined. To render some…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8528],"tags":[8617],"class_list":["post-74433","page","type-page","status-publish","hentry","category-reactjs","tag-index-routes-and-index-links"],"acf":[],"yoast_head":"\nIndex Routes and Index Links - Tutorial<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/index-routes-and-index-links\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Index Routes and Index Links - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Index Routes To illustrate the use case for IndexRoute, imagine the following route config without it: <Router> <Route path=”\/” component={App}> <Route path=”accounts” component={Accounts}\/> <Route path=”statements” component={Statements}\/> <\/Route> <\/Router> When the user visits \/, the App component is rendered, but none of the children are, so this.props.children inside of App will be undefined. To render some...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/index-routes-and-index-links\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:53:28+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/index-routes-and-index-links\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/index-routes-and-index-links\/\",\"name\":\"Index Routes and Index Links - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2020-01-17T07:20:03+00:00\",\"dateModified\":\"2024-04-12T08:53:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/index-routes-and-index-links\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/index-routes-and-index-links\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/index-routes-and-index-links\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Index Routes and Index Links\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Index Routes and Index Links - Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/index-routes-and-index-links\/","og_locale":"en_US","og_type":"article","og_title":"Index Routes and Index Links - Tutorial","og_description":"Index Routes To illustrate the use case for IndexRoute, imagine the following route config without it: <Router> <Route path=”\/” component={App}> <Route path=”accounts” component={Accounts}\/> <Route path=”statements” component={Statements}\/> <\/Route> <\/Router> When the user visits \/, the App component is rendered, but none of the children are, so this.props.children inside of App will be undefined. To render some...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/index-routes-and-index-links\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:53:28+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/index-routes-and-index-links\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/index-routes-and-index-links\/","name":"Index Routes and Index Links - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2020-01-17T07:20:03+00:00","dateModified":"2024-04-12T08:53:28+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/index-routes-and-index-links\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/index-routes-and-index-links\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/index-routes-and-index-links\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Index Routes and Index Links"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=74433"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74433\/revisions"}],"predecessor-version":[{"id":75359,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/74433\/revisions\/75359"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=74433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=74433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=74433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}