javascript - React Router not showing the component - Stack Overflow|江阴雨辰互联

I've been learning reactjs for few weeks now and I wanted to create a small blog type website. So there are a few problems with my app.

First of all, I want the inactive sidebar button to look pletely merged with white color with the font color to black and to have the inset box-shadow only when it's clicked and active.
Same with the main container navigation panel where ALL and Shared with Me should be grey but turns black and big in font size when clicked but it doesn't do anything when clicked.
The third is that when I click "Post" in the navigation panel then it should show the hello button and when I click the "ALL" button, it should just show hello in the main area but it isn't working as well as both the hello button and the hello text are shown in default but I want to show the hello text when I click "All" button. Not sure if it's the problem with react-router or some other thing. I knew how to show ponents only when clicked but I forgot it since I didn't practice enough or write it down and I'm going insane now. If someone could please point me in the correct direction, I would be very grateful.

I have put the demo in code sandbox

App.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 "./ponent/Layout";
// import "bootstrap/dist/css/bootstrap.min.css";
import LeftBox from "./ponent/leftBox";
import SecTab from "./ponent/secTab";
class App extends Component {
  render() {
    return (
      <Router>
        <>
          <NavBarPage />
          {/* <hr /> */}
          {/* <LeftBox /> */}
          <Layout>
            <Switch>
              <Route exact path="/" ponent={Home} />
              <Route path="/about" ponent={About} />
              <Route path="/secTab" ponent={SecTab} />
              <Route Component={NoMatch} />
            </Switch>
          </Layout>
        </>
      </Router>
    );
  }
}
export default App;

leftBox.js (the left sidebar)

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 (The main area navigation panel)

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;

Layout.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;

App.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 .wele 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;
}

I've been learning reactjs for few weeks now and I wanted to create a small blog type website. So there are a few problems with my app.

First of all, I want the inactive sidebar button to look pletely merged with white color with the font color to black and to have the inset box-shadow only when it's clicked and active.
Same with the main container navigation panel where ALL and Shared with Me should be grey but turns black and big in font size when clicked but it doesn't do anything when clicked.
The third is that when I click "Post" in the navigation panel then it should show the hello button and when I click the "ALL" button, it should just show hello in the main area but it isn't working as well as both the hello button and the hello text are shown in default but I want to show the hello text when I click "All" button. Not sure if it's the problem with react-router or some other thing. I knew how to show ponents only when clicked but I forgot it since I didn't practice enough or write it down and I'm going insane now. If someone could please point me in the correct direction, I would be very grateful.

I have put the demo in code sandbox https://codesandbox.io/s/sweet-feynman-2tvy5

App.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 "./ponent/Layout";
// import "bootstrap/dist/css/bootstrap.min.css";
import LeftBox from "./ponent/leftBox";
import SecTab from "./ponent/secTab";
class App extends Component {
  render() {
    return (
      <Router>
        <>
          <NavBarPage />
          {/* <hr /> */}
          {/* <LeftBox /> */}
          <Layout>
            <Switch>
              <Route exact path="/" ponent={Home} />
              <Route path="/about" ponent={About} />
              <Route path="/secTab" ponent={SecTab} />
              <Route Component={NoMatch} />
            </Switch>
          </Layout>
        </>
      </Router>
    );
  }
}
export default App;

leftBox.js (the left sidebar)

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 (The main area navigation panel)

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;

Layout.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;

App.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 .wele 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;
}

Share Improve this question edited Sep 23, 2019 at 8:58 Laczkó Örs 1,1161 gold badge27 silver badges43 bronze badges asked Sep 23, 2019 at 7:05 henrydoe 3972 gold badges7 silver badges24 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

For react dom version 6, I used element instead of ponent and it worked for me. Here we don't need to mention exact.

For example :

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

you've asked many questions into one. I will not answer the CSS part here. I'll focus on the react-router part of the question.

From App.js

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

The <Switch> ponent is responsible for render the different ponents for each route. But the problem here is that you are rendering it as a child of your <Layout> ponent. And your <Layout> ponent is doing nothing about it. It's just skipping it pletely.

From Layout.js

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

See that it does nothing with its this.props.children prop. So nothing from your <Switch> is being rendered.

Suggestion for 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>
    );

The 1 and 2 topics of your question are probably more related to CSS and I suggest you move them to a different question.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744210783a4563321.html

javascript - React Router not showing the component - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - React Router not showing the component - Stack Overflow

2 Answers 2

相关推荐