How We Teach How

My Classroom Classroom

Enroll by November 4th, 2024

OUR PROGRAMS

FSWD, Data Science & Applied AI Full-stack Web Development Front-end Web Development Back-end Web Development Explore Our Programs Our Students Sample projects and assignments How We Teach FAQs Message Us

YOUR ACCOUNT

Ranked Best Coding Bootcamps 2023

How to get active route name in Navigation layout with React Router

Altcademy Team wrote on 7 February 2018

Hello,

I have a navigation layout with a menu and the title of the current page. How can I get the current route name to show in the title?

Here is how the routing is organized:

<Router history={ browserHistory }>
  <Route path="/" component={ Layout }>
    <IndexRoute component={ Index } onEnter={ requireAuth } />
    <Route path="/hello" component={ Hello } onEnter={ requireAuth } />
    <Route path="/world" component={ World } onEnter={ requireAuth } />
    <Route path="/login" component={ Login } />
  </Route>
</Router>

You should be able to see the current route in this.props.location

Learn web development online

Cohort 95 begins on November 4th, 2024

Most Popular

Full-stack Web Development

Learn full-stack development with HTML, CSS, JavaScript, React, Ruby and Rails, Computer science fundamentals & programming skills.

VIEW DETAILS

Upgrade FSWD to include Python, Data Science, AI Application, TypeScript and more.

Front-end Web Development

Learn front-end development with HTML, CSS, JavaScript, and jQuery. Computer science fundamentals & programming skills.

VIEW DETAILS

Back-end Web Development

Learn back-end development with Ruby and Rails, M-V-C. Computer science fundamentals with practical programming skills.

VIEW DETAILS

Trusted by

Students and instructors from world-class organizations

Join the upcoming Cohort #95

Enroll for November 4th, 2024