How to define nested routes in React JS?

Question

JavaScript

I'm trying to define nested routes in my app using react-router-dom . Here is what I have:

index.js

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/app" component={App} />
      <Route path="/smartphones" component={() => <SmartphoneTable smartphones={PHONES} />} />
      <Route path="/sign-up" component={SignUpForm} />
      <Route component={() => <h1>Not found</h1>} />
    </Switch>
  </Router>,
  document.getElementById('root')
);

app.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      welcome: "Fuck you!"
    };
  }

  render() {
    const { match } = this.props;

    return (
      <Container>
        <Jumbotron>
          <h1>Hello, {this.props.name}, {this.props.age} y.o.!</h1>
          <p>{this.state.welcome}</p>
          <Switch>
            <Route path="/app/clock" component={() => <Clock interval="2000" />} />
            <Route path="/app/button" component={() => <ClickButton class="off" label="Press me" />} />
          </Switch>
        </Jumbotron>
      </Container>
    );
  }
}

The problem is that all routes work fine except those defined in App.js . What needs to be done to make all routes work?

Answer 1

exact remove