【问题标题】:React Router only rendering one routeReact Router 只渲染一个路由
【发布时间】: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"

},

我查看了有关 stackoverflow、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/

    结果:什么都没有

    期望:“这是创建页面”

【问题讨论】:

    标签: reactjs react-router react-router-dom react-dom


    【解决方案1】:

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

    做出改变,从

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

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

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

    【讨论】:

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签