Question

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

}，

我查看了关于stackoverflow的所有相关问题，create-react-app文档，并在其回购中搜索了未解决的问题部分，并在每个可能的关键字上进行了谷歌搜索。我很茫然。

我的路由器只会渲染一条路由（本地路由）。

如何获取此路线以显示“ /创建”路线？

我尝试过：

“精确”和“严格”属性的组合
用

或之后的所有内容包装起来

尝试使用（）

（打开）包装

同时尝试了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;

URL：http://localhost:3000/#/

结果：“这是家”

期望：“这是家”

URL：http://localhost:3000/#/create

URL：http://localhost:3000/#/create/

结果：一无所有

期望：“这是创建页面”

Answer 1

是错字。请注意，字母“ C”应该是小写字母。

从进行更改

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

到

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

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

React Router仅呈现一条路由

1 个答案: