javascript - React-路由器 : Achieving the same goal of in v4

Question

我目前正在关注一个使用 React-router v3 的视频 ( https://www.youtube.com/watch?v=Smk2FusU_70 )，作者正在使用 <IndexRoute> 。我正在使用 v4，无法再使用它。

我正在尝试渲染App当我转到/时然后渲染Custom当我转到/Custom时.

下面的代码不起作用。

我应该如何修改它App包含在 / 内当我转到/Custom时它还包括 / ？

谢谢!

我的index.js

const Routes = props => {
    return (
        <Router>
            <div>
                <Route exact path='/' component={Container} >
                    <Route path='app' component={App} />
                    <Route path='custom' component={Custom} />
                </Route>

                <Route path='*'>
                    <Redirect to='/' />
                </Route>
            </div>
        </Router>
    )
}

容器.js

class Container extends Component {
    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">Welcome to React</h1>
                </header>
            </div>
        );
    }
}

App.js

class App extends Component {
  render() {
    return (
      <p className="App-intro">
        To get started, edit <code>src/App.js</code> and save to reload.
      </p>
    );
  }
}

完整代码在这里 - https://gist.github.com/RubikCubes/b4015b867d76527a063cd3e25144ca41

Answer 1

这有效:

class Container extends Component {
    render() {
        const { children, match } = this.props;

        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">Welcome to React</h1>

                </header>
                <div>
                    <Route exact path="/" component={App} />
                    <Route path="/custom" component={Custom} />
                </div>
            </div>
        );
    }
}