使用 REACT ROUTER 4 嵌套路由变为空白

Question

我正在使用 React 和 React-Router-V4，因为我是 React 的新手，想知道我是否遗漏了什么。

当我转到路由“/”时，它可以工作并显示 Index 组件，但是当我转到“/posts/index”时，它没有显示任何内容，甚至没有显示 DefaultPage组件，以下是我在 index.js:

中的路线

<Switch>
    <Route path='/posts/index' component={ShowPosts} />
    <Route path='/' component={Index} />
    <Route component={DefaultPage} />
</Switch>

Answer 1

由于我无法发表评论，我认为问题出在 webpack.config.js 而不是 react-router，因为如果您提供 Public，您可能没有 /希望输出的路径会很好。

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'webpack-index.js',
    publicPath: '/'
}

Answer 2

首先你需要添加exact到索引路由，否则如果URL路径错误，你的默认页面路由将无法工作。

<Route exact path='/' component={Index} />

关于 ShowPosts 路由，它看起来像是来自组件的错误，如果可能，请分享您的组件代码。

使用 REACT ROUTER 4 嵌套路由变为空白

Using REACT ROUTER 4 nested Routes are coming blank

reactjs

react-router

react-router-v4