Question

我有一个使用React Router的React App。我有一个/inventory页面，另一个页面位于/inventory/edit。这是我为所有页面设置的Switch：

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path='/' component={Home}/>
      <Route exact path='/store' component={Store}/>
      <Route exact path='/contact' component={Contact}/>
      <Route exact path='/admin' component={Admin}/>
      <Route exact path='/login' component={Login}/>
      <Route exact path='/register' component={Register}/>
      <Route exact path='/inventory' component={Inventory}/>
      <Route exact path='/inventory/edit' component={EditItem}/>
      <Route component={NotFound} />
    </Switch>
  </Router>,
  document.getElementById('root')
);

我可以使用链接（edit）导航到<Link to={{pathname: '/inventory/edit'}}>页面，但如果我在浏览器地址栏中输入网址，则不会呈现任何内容，而是留下空白页面。我注意到在浏览器控制台中我收到错误消息：

未捕获的SyntaxError：意外的令牌＆lt; bundle.js：1

因此，我不确定使用Webpack是否存在问题，或者与其无关。我还注意到，手动输入的地址栏中包含多个斜杠的情况会发生这种情况，因此/store工作时，/store/test也会显示空白。我希望/inventory/edit将我带到正确的页面，但是/store/test应该会将我带到我的404页面。

我已经四处寻找但是却没有在网上找到这样的东西。如果有人能指出我在这里做错了什么，那就太棒了。

编辑（解决方案）

我必须将index.html文件中定义的所有路径从./foo/bar更改为/foo/bar，这是我从Garry Taylor的评论中得出的。

Answer 1

其他解决方案：

Webpack文件

从这里：React Router not working when URL contains multiple paths 在您的webpack配置文件中，添加一个输出配置，并将publicPath设置为/。即

output:{
  publicPath: '/'
}

为完成起见，如果您有一个（可选），也可以在devServer配置中添加publicPath。即

devServer:{
  ...
  publicPath:'/'
}

Index.html

将HTML基本标记添加到index.html文件的标头部分应提供相同的结果。即

<base href="/">

使用具有多个URL段的React路由器

1 个答案:

Webpack文件

Index.html