Question: I have created a jQuery change event handler which works ok on a normal drop down (choice) field, but as soon as I change that filed property to "Require that this column contains information" = Yes then the event handler will no longer trigger. Any idea how to overcome this?

This is the original code. Could you recommend how to fix it?

```
$("select[title='Unit']").change(function() { 
    var UnitField = SPUtility.GetSPField('Unit').GetValue();
    if ( ITCUnitField.indexOf("Unit 1") >= 0) 
    {
        alert("Are you sure you belong to Unit 1"); 
    }
});

```

Answer: 
Original Answer
---------------

The version 4 of the React Router has **a lot of breaking changes**. You can't use nested routes this way anymore. Check out this example of nested routes using the new version of the React Router.

```
const Header = () => (
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
    </ul>
  </nav>
)

const Footer = () => (
  <footer>
    Copyrights
  </footer>
)

const Layout = props => (
  <div className="layout">
    <div className="layout__container">
      <Header />{ props.children }
      <Footer />
    </div>
  </div>
)

const Home = () => <Layout>This is the home page.</Layout>
const About = () => <Layout>This is the about page.</Layout>

<Router>
  <div>
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
  </div>
</Router>

```

Hope it helps.

Updated Answer (November, 16th)
-------------------------------

This is what I'm doing actually.

```
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import React from 'react'

import About from './components/views/About'
import Home from './components/views/Home'
import Layout from './components/views/Layout'

const Routes = () => (
  <BrowserRouter>
    <Layout>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/about' component={About} />
      </Switch>
    </Layout>
  </BrowserRouter>
)

export default Routes

```
I think you are misunderstanding the way React-router works.

Nested routes are rendered "Nested", that means that parent routes will renders itself and then all childs, usually used for common routes.

Here you have a working example I am using right now:

```js
<Router history={browserHistory}>
  <Route path='/' component={Root}>
    <Route path='/examples/react-redux-websocket' component={App} />
    <Route path='/examples/react-redux-websocket/chat/:chatid/participant/:participantid' component={Chat} />
    <Route path='/examples/react-redux-websocket/chat/:chatid' component={Chat} />
    <Route path='/*' component={NoMatch} />
  </Route>
</Router>

class Root extends Component {
  render () {
    return (
      <div>
        {this.props.children}
        <Footer />
      </div>
    )
  }
}

```

As you can see, Root route render a common Footer and then all nested childs. All routes inside the Root one will render the same footer as well.

I think what you need is something like that:

```js
<Router>
  <Route path='/' component={App} />
  <Route path='/active-items' component={ActiveItems} />
</Router>

```

Check out www.facundolarocca.com to see it working, you will find the repo too.

Let me know if it works.