如何识别 React JS 中的嵌套路由？

Question

我正在尝试使用 react-router-dom 在我的应用程序中定义嵌套路由。这是我有的：问题是所有路由都可以正常工作，除了那些在 App.js 中定义的路由。需要做什么才能使所有路由都正常工作？

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: "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>
    );

Answer 1

在index.js 中删除exact 属性：

<Route path="/app" component={App} />

每次 path 更改为 /app/foo 应用程序都会被卸载，因此会卸载子级。