React Router 只渲染一条路由

Question

我是 React 和 React-router-dom 的新手。我已经花了几个小时了，但我却陷入了死胡同。

我正在使用 create-react-app 和 bulma 作为 css。我的依赖项：

"dependencies": {
  "bulma": "^0.7.1",
  "font-awesome": "^4.7.0",
  "node-sass-chokidar": "^1.3.3",
  "react": "^16.5.2",
  "react-bulma-components": "^2.1.0",
  "react-dom": "^16.5.2",
  "react-fontawesome": "^1.6.1",
  "react-router-dom": "4.3.1",
  "react-scripts": "2.0.4"

},

我查看了 stackoverflow、create-react-app 文档上的所有相关问题，并在其存储库中搜索了他们的开放问题部分，用谷歌搜索了每个可能的关键字。我不知所措。

我的路由器只会渲染一条路线（Homeroute）。

我如何让它也显示“/create”路线？

我试过了：

• “精确”和“严格”属性的组合
• 用 <div> 包裹 <BrowserRouter> 或 <HashRouter> 之后的所有内容
• 尝试使用 <Switch> 来（取消）包装 <Route>

• 尝试了 BrowserRouter 和 HashRouter

  import React, { Component } from "react";
  import { Switch, Route, NavLink, BrowserRouter, HashRouter } from "react-router-dom";
  
  const Home = () => {
      return (<h2>This is Home</h2>);
  }
  const Create = () => {
      return (<h2>This is Create page</h2>);
  }
  
  class App extends Component {
    render() {
      return (
        <HashRouter>
          <div>
            <Navigation />
            <div className="section">
              <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/create" exact Component={Create} />
              </Switch>
            </div>
            <Footer />
          </div>
        </HashRouter>
      );
    }
  }
  export default App;
  

网址：http://localhost:3000/#/

结果：“这就是家”

期待：“这就是家”

网址：http://localhost:3000/#/create

网址：http://localhost:3000/#/create/

结果： 什么都没有

预期：“这是创建页面”

Answer 1

这是一个错字。注意字母“C”，它应该是小写的。

做出改变，从

<Route path="/create" exact Component={Create} />

到

<Route path="/create" exact component={Create} /> 

这是演示： https: //codesandbox.io/s/oq0rov0r4q