Question

我一直在遵循本教程来创建React项目。本教程导致创建多个React组件，这些组件中具有简单的示例文本。这样可以测试react-router-dom。

简单组件的示例，所有其他组件都是相似的。

import React, { Component } from 'react'

export default class Cart extends Component {
  render() {
    return (
      <div>
        <h3>Hello From Cart</h3>
      </div>
    )
  }
}

使用反应路由器显示组件，该路由器根据URL切换显示的组件

class App extends React.Component {
  render() { 
    return (  
      <React.Fragment>
        <NavBar/>
        <Switch>
          <Route path="/details" Component={Details} />
          <Route path="/cart" Component={Cart} />
          <Route path="/" Component={ProductList} />
          <Route Component={Default} />
        </Switch>
      </React.Fragment>
    );
  }
}

此外，为避免混淆，我的浏览器路由器正在从index.js封装我的App组件

ReactDOM.render(
    <Router>
        <App />
    </Router>
, document.getElementById('root'));

当我导航到本地主机上的/ cart网址时，这就是我的结果。

应显示的内容：

https://imgur.com/fZw5QnP.png

但是，显示的是：

https://i.imgur.com/F1O07Y8.png

请帮助我解决此问题，谢谢。

Answer 1

我意识到我的错误，我应该在路径中使用“ Component = {}”（小写的“ c”）。我将这些问题发布给所有存在相同问题的人。

为什么React Router不更改关于URL更改的视图？

1 个答案: