javascript - React Router 不显示组件
问题描述
我已经学习 reactjs 几个星期了,我想创建一个小型博客类型的网站。所以我的应用程序存在一些问题。
首先,我希望非活动侧边栏按钮看起来与白色完全合并,字体颜色为黑色,并且只有在单击并处于活动状态时才具有插入框阴影。
与主容器导航面板相同,其中 ALL 和 Shared with Me 应该是灰色的,但在单击时会变成黑色并且字体大小会变大,但单击时它不会执行任何操作。
第三是当我在导航面板中单击“发布”时,它应该显示 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;
}
解决方案
对于 React dom 版本 6,我使用element
而不是,component
它对我有用。这里我们无需赘述exact
。
例如 :
<Routes>
<Route path="/" element={<Home />}/>
<Route path="/add-course" element={<Addcourse/>} exact />
<Route path="/view-courses" element={<Allcourses/>} exact />
</Routes>
推荐阅读
- scala - 将 N 个字符串数组映射到数组数组(N/b 个字符串)
- php - dashboard.php 文件中的 html 标签问题
- python - 查找现有模块,然后在 Jupyter 中更改目录
- python - 使用 hlines、vlines 和 matplotlib 创建形状,以便外角是完整的
- nginx - 在 Kubernetes Ingress 中禁用缓存
- swift - 将伪代码传输到 Swift 会导致不同的输出
- c++ - LTSpice + Wine 在多核 Linux 机器上的性能不佳
- javascript - 获取数组中所有选中的复选框以发布到 API
- php - PHP的登录问题
- c# - 为什么方法正在修改列表
我的加载页面中的变量?