当前位置: 首页 > 知识库问答 >
问题:

React路由器只渲染一条路由

昌琪
2023-03-14

我是一个新的反应和反应。我已经花了几个小时了,我只是走到了死胡同。

我正在使用CreateReact应用程序和用于css的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的所有相关问题,创建了react应用程序文档,并在他们的回购协议中搜索了他们的开放问题部分,谷歌搜索了所有可能的关键字。我不知所措。

我的路由器只会呈现一个路由(Homeroute)。

如何让它显示/创建路线?

我尝试过:

>

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个答案

祁嘉言
2023-03-14

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

改变,从

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

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

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

 类似资料:
  • 我使用开关标签路由不同的路由 但这只会加载路径/和/主页的第一个组件,也会加载loginpage nothing,并且主页组件不会加载到/主页路径! 我在切换前尝试过使用浏览器路由器标签,尝试过先加载主页,也是一样的只有主页组件加载 App.js 登录age.js 家age.js 预期 访问/应该加载登录页面 访问/主页应加载主页

  • 英文原文:http://emberjs.com/guides/routing/rendering-a-template/ 路由处理方法最主要的职责之一就是将恰当的模板渲染到屏幕上去。 默认情况下,路由处理方法将模板渲染到离它最近的带有模板的父级模板中去。 1 2 3 4 5 App.Router.map(function() { this.resource('posts'); }); Ap

  • 问题: 有异步路由,从中获取参数并返回(组件)。问题是当我从一个到另一个(只是相同的路由,但不同。参数)我的路由器卸载并重新渲染组件。但它应该只传递新的道具,不要触及我的组件生命周期。怎么解决呢?我做错了什么? 代码: 路由器 组件将装入电影组件中 更新:好的,做了一些实验。 替换

  • I my app.js我已将路线定义为: 在我的中,我有一个链接: 但问题是,当我在aboue path中设置prop'确切={true}时,找不到这个路径 当我没有在上面的路径中设置exact={true}时,在同一页面上呈现路径组件及其下方的路径组件

  • 嗨,我不确定这是一个期望的行为还是一个bug。 这是一个空的create react应用程序示例,带有 版本: 反应:^16.13.1, react-dom:^16.13.1, react-router-dom:^5.2.0, 反应脚本:3.4.1 部件: /-对于主部件 /触点-用于触点组件 这里提供小提琴 多次单击“主页”链接会显示一条