React Router 只渲染一个路由

Posted 2023-02-23

【中文标题】React Router 只渲染一个路由

【英文标题】：React Router only rendering one route

【发布时间】：2019-03-13 09:11:32

【问题描述】：

我是 React 和 react-router-dom 的新手。我现在已经花了几个小时，我只是走到了死胡同。

我在 css 中使用 create-react-app 和 bulma。我的依赖：

"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"

,

我查看了有关 ***、create-react-app 文档的所有相关问题，并在他们的 repo 中搜索了他们的未解决问题部分，搜索了所有可能的关键字。我很茫然。

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

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

我试过了：

“精确”和“严格”属性的组合 在 或 之后用 包装所有内容 尝试（解）包装 和

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/

结果：什么都没有

期望：“这是创建页面”

【问题讨论】：

【参考方案1】：

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

做出改变，从

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

到

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

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