Как определить вложенные маршруты в React JS?

Question

[zergon321]

Я пытаюсь определить вложенные маршруты в своем приложении при помощи react-router-dom. Вот что у меня есть:

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>
    );
  }
}

Проблема в том, что нормально работают все маршруты, кроме тех, что определены в App.js. Что необходимо сделать, чтобы работали все маршруты?

Answer 1

[Mikhail Osher]

exact уберите

Answer 2

[miliko mikoyan]

В index.jsудалить exactопору:
<Route path="/app" component={App} />

Каждый раз, когда pathизменения в /app/fooприложении отключаются, следовательно, отключаются дети.