堆棧內存溢出
  簡體   English   中英

React Router 不顯示組件

[英]React Router not showing the component

 原文  2019-09-23 07:05:56  6   2    javascript/ html/ css/ reactjs/ react-router

問題描述

我已經學習 reactjs 幾個星期了，我想創建一個小型博客類型的網站。 所以我的應用程序存在一些問題。

  1. 首先，我希望非活動側邊欄按鈕看起來與白色完全合並，字體顏色為黑色，並且只有在單擊並處於活動狀態時才具有插入框陰影。

  2. 與主容器導航面板相同，其中 ALL 和 Shared with Me 應該是灰色的，但在單擊時會變成黑色並且字體大小會變大，但單擊時它不會執行任何操作。

  3. 第三，當我在導航面板中單擊“發布”時，它應該顯示 hello 按鈕，當我單擊“ALL”按鈕時，它應該只在主要區域顯示 hello，但它的工作效果不如兩者hello 按鈕和 hello 文本默認顯示，但我想在單擊“All”按鈕時顯示 hello 文本。 不確定是 react-router 還是其他問題。 我只知道如何在單擊時顯示組件，但我忘記了它，因為我沒有足夠的練習或寫下來，我現在要瘋了。 如果有人能指出我正確的方向，我將不勝感激。

我已將演示放入代碼沙箱https://codesandbox.io/s/sweet-feynman-2tvy5

應用程序.js

import React, { Component } from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import NavBarPage from "./nav";
import "@fortawesome/fontawesome-free/css/all.min.css";
import Home from "./Home";
import About from "./About";
import NoMatch from "./NoMatch";
import Layout from "./component/Layout";
// import "bootstrap/dist/css/bootstrap.min.css";
import LeftBox from "./component/leftBox";
import SecTab from "./component/secTab";
class App extends Component {
  render() {
    return (
      <Router>
        <>
          <NavBarPage />
          {/* <hr /> */}
          {/* <LeftBox /> */}
          <Layout>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/about" component={About} />
              <Route path="/secTab" component={SecTab} />
              <Route Component={NoMatch} />
            </Switch>
          </Layout>
        </>
      </Router>
    );
  }
}
export default App;

leftBox.js（左側邊欄）

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";

import { Nav, Button } from "react-bootstrap";

import "../App.css";
export default class LeftBox extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <>
        <div className="nav">
          <ul>
            <li className="list-item">
              <Link to="/about">
                <input
                  type="button"
                  className="sideButton sideBarText"
                  value="Dashboard"
                />
              </Link>
            </li>
            <li className="list-item">
              <Link to="/">
                <input
                  type="button"
                  className="sideButton2 sideBarText2"
                  value="People"
                />
              </Link>
            </li>
          </ul>
        </div>
      </>
    );
  }
}

textBox.js（主區域導航面板）

import React, { Component } from "react";
import WriteSec from "./writeSec";
import SecTab from "./secTab";
import { BrowserRouter as Link } from "react-router-dom";

class TextBox extends Component {
  render() {
    return (
      <div>
        <div class="container" id="dashboardpills">
          <br />

          <ul class="nav nav-pills" role="tablist">
            <li class="nav-item">
              <span class="active mainCom" id="hometab" data-target="#home">
                POSTS
              </span>
              <WriteSec />
            </li>
            <li class="nav-item">
              <span
                id="sharedwithmetab"
                class="nav-link mainComS2"
                data-toggle="pill"
                data-target="#menu2"
              >
                <Link to="/secTab">All</Link>
              </span>
              <SecTab />
            </li>
            <li class="nav-item">
              <span
                id="sharedwithmetab"
                class="nav-link mainComS"
                data-toggle="pill"
                data-target="#menu2"
              >
                SHARED WITH ME
              </span>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}

export default TextBox;

布局.js

import React, { Component } from "react";
import { Container, Row, Col } from "react-bootstrap";
import LeftBox from "./leftBox";
import "../App.css";
import TextBox from "./textBox";
class Layout extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Container className="conMain">
        <Row>
          <Col xs={3} className="leftMain">
            <LeftBox />
          </Col>
          <Col xs={9} className="rightMain">
            <TextBox />
          </Col>
        </Row>
      </Container>
    );
  }
}
export default Layout;

應用程序.css

.leftMain {
  display: flex;
  flex-direction: row;
  padding-top: 40px;
}
.rightMain {
  display: flex;
  padding-top: 20px;
}
ul {
  list-style: none;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 2rem;
  overflow: hidden;
  z-index: 1;
  width: 88.15%;
  margin: auto;
  top: 0;
  border-bottom: solid 1px var(--primary-color);
  opacity: 0.9;
  position: static;
  top: 0;
  box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8),
    -12px 0 8px -4px rgba(31, 73, 125, 0.8);
  box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white,
    12px 0 15px -4px rgba(31, 73, 125, 0.8),
    -12px 0 15px -4px rgba(31, 73, 125, 0.8);
}

.navbar ul {
  display: flex;
}
.navbar a {
  color: #2076d9;
  padding: 0.45rem;
  margin: 0 0.25rem;
}

.navbar a:hover {
  color: var(--primary-color);
}

.navbar .welcome span {
  margin-right: 0.6rem;
}
/* dashButton {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
dashButton::after {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
} */

@media (min-width: 768px) #dashboardpills .nav-item .nav-link {
  max-height: 42px;
  opacity: 0.25;
  color: #000;
  font-family: Poppins;
  font-size: 30px;
  font-weight: 700;
  line-height: 42px;
}
a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}
.nav-pills .nav-link {
  border-radius: 0.25rem;
}
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}
a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}
*,
::after,
::before {
  box-sizing: border-box;
}
user agent stylesheet li {
  text-align: -webkit-match-parent;
}
.nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.sideButton {
  width: 200px;
  height: 50px;
  padding-left: 0px;
  margin-left: 0px;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  border-radius: 0 10px 10px 0;
  background-color: rgba(191, 191, 191, 0.14);
  box-shadow: inset 0 1px 10px 0 rgba(0, 0, 0, 0.15);
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
  -webkit-box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.17);
  -moz-box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.17);
  box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.1);
}
.sideButton:active {
  background-color: #007bff;
}
.sideButton:selected {
  background-color: #007bff;
}

.sideButton2 {
  width: 200px;
  height: 50px;
  padding-left: 0px;
  margin-left: 0px;
  margin-top: 55px;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  border-radius: 0 10px 10px 0;
  background-color: white;
  box-shadow: inset 0 1px 10px 0 rgba(0, 0, 0, 0.15);
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
  -webkit-box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.17);
  -moz-box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.17);
  box-shadow: inset 0px -1px 28px -1px rgba(0, 0, 0, 0.1);
}
.sideButton2:active:after {
  background-color: rgba(191, 191, 191, 0.14);
}
.titleName {
  font-family: Poppins;
}

.sideBarText {
  color: #000;
  font-family: Poppins;
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
}
.sideBarText2 {
  color: #000;
  font-family: Poppins;
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
}

.createNew {
  height: 40px;
  width: 153px;
  border: 0px;
  border-radius: 10px;

  background-image: linear-gradient(
    to top,
    #d83f91,
    #d0409b,
    #c743a5,
    #bb47af,
    #ae4bb8
  );
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.25);
}
.signOut {
  border: 0px;
  height: 40px;
  width: 100px;
  border-radius: 10px;
  background-image: linear-gradient(
    to right,
    #eb3941,
    #f15e64,
    #e14e53,
    #e2373f
  );
  box-shadow: 0 5px 15px rgba(242, 97, 103, 0.4);
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.25);
}

.mainCom {
  height: 56px;
  width: 68px;
  color: #000;
  font-family: Poppins;
  font-size: 40px;
  font-weight: 700;
  line-height: 56px;
  left: 0;
  cursor: pointer;
}
.mainComS {
  height: 42px;
  width: 255px;
  opacity: 0.25;
  color: #000;
  font-family: Poppins;
  font-size: 24px;
  font-weight: 700;
  line-height: 42px;
  cursor: pointer;
}
.mainComS2 {
  height: 42px;
  width: 200px;
  opacity: 0.25;
  color: #000;
  font-family: Poppins;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 42px;
  cursor: pointer;
}
.conMain {
  height: 100vh;
  width: 100%;
  box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8),
    -12px 0 8px -4px rgba(31, 73, 125, 0.8);
  box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white,
    12px 0 15px -4px rgba(31, 73, 125, 0.8),
    -12px 0 15px -4px rgba(31, 73, 125, 0.8);
}

ul {
  list-style: none;
}

li:hover {
  cursor: pointer;
}

2 個解決方案

解決方案1
 2  2019-09-23 08:04:17

你已經把很多問題合二為一了。 我不會在這里回答 CSS 部分。 我將重點關注問題的react-router部分。

來自App.js

<Layout>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/secTab" component={SecTab} />
    <Route Component={NoMatch} />
  </Switch>
</Layout>

<Switch>組件負責為每個路由渲染不同的組件。 但這里的問題是您將其渲染為<Layout>組件的子組件。 而您的<Layout>組件對此無能為力。 它只是完全跳過它。

來自Layout.js

    return (
      <Container className="conMain">
        <Row>
          <Col xs={3} className="leftMain">
            <LeftBox />
          </Col>
          <Col xs={9} className="rightMain">
            <TextBox />
          </Col>
        </Row>
      </Container>
    );

看到它對this.props.children道具沒有任何作用。 因此，您的<Switch>中沒有任何內容被渲染。

對Layout.js的建議

    return (
      <React.Fragment>
      <Container className="conMain">
        <Row>
          <Col xs={3} className="leftMain">
            <LeftBox />
          </Col>
          <Col xs={9} className="rightMain">
            <TextBox />
          </Col>
        </Row>
      </Container>
      {this.props.children}    // THIS WILL RENDER YOUR <Switch>
      </React.Fragment>
    );

您問題的 1 和 2 主題可能與 CSS 更相關，我建議您將它們移至另一個問題。

解決方案2
 0  2021-11-12 19:51:04

對於 react dom 版本 6，我使用“元素”而不是“組件”，它對我有用。 在這里，我們不需要提及“確切”。

例如：

<Routes>
          <Route path="/" element={<Home />}/>
          <Route path="/add-course" element={<Addcourse/>} exact />
          <Route path="/view-courses" element={<Allcourses/>} exact />
</Routes>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 反應路由器顯示錯誤的組件 React 組件或元素未顯示在路由器中 React 路由器總是顯示 NotFound 組件 嵌套 React Router：在顯示嵌套子組件時隱藏父組件 react-router在不在路線中時顯示組件的問題 React Router - 由於自定義路由組件，始終顯示 404 頁面 路由器未顯示vue組件 反應路由器路由器不顯示 React路由器不呈現組件 反應路由器未重定向到組件
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM