javascript - React-Router:在v4中实现<IndexRoute>的相同目标

我目前正在观看一个使用v3的react-router（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>
    )
}

Container.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

最佳答案

这工作：

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

关于javascript - React-Router:在v4中实现<IndexRoute>的相同目标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47500937/