路由问题：组件在可点击按钮路由后显示在屏幕上
ROUTING ISSUE: Components showing on screen after an clickable-button route
我的项目：
这是一个电影列表项目。此应用程序用作电影流媒体服务，用户有 4 种类型可供选择。 （浪漫、恐怖、喜剧和动作）。流派由可点击的卡片组件显示，点击后会转到各自的页面（显示他们选择的电影）。
问题：
我目前遇到路由问题。例如，如果用户单击浪漫类型按钮。 URL会显示localhost:3000/romance. ，表示页面已经路由。
返回了什么？
功能齐全的导航栏
所有 4 个流派卡片组件再次返回，在我看来它们嵌套在主页正文的顶部。
Romance.js 文件（电影列表应该在其中）也被返回，但它显示在类型卡按钮组件下。
有什么方法可以只在主屏幕上嵌套流派卡片按钮组件，并在我转到任何流派页面时让它们消失？
我知道这听起来可能令人困惑，因为英语是我的第二语言。如果您需要更好的解释，请随时在评论中询问我。
代码：
App.js
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import NavbarA from './components/NavbarA';
import Home from './components/Home';
function App() {
return (
<div className="App">
<NavbarA/>
<Home/>
<div>
</div>
</div>
);
}
export default App;
Navbar.js
import React, { Component } from 'react';
import { Navbar,Nav, Container } from 'react-bootstrap';
import {
BrowserRouter as Router,
Routes,
Route,
Link
} from "react-router-dom";
import Home from './Home';
import About from './About';
export default class NavbarA extends Component{
render(){
return (
<Router>
<div>
<Navbar bg="dark" variant={"dark"} expand="lg">
<Container>
<Navbar.Brand href ="/home">
<img src={process.env.PUBLIC_URL + '/spotifly.png'} alt="logo" />
</Navbar.Brand>
<Navbar.Brand/>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link as ={Link} to = {"/home"}>Home</Nav.Link>
<Nav.Link as ={Link} to = {"/about"}>About</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
<div>
<Routes>
<Route path="/" element={<Home/>} />
<Route path="/about" element={<About />} />
</Routes>
</div>
</Router>
)
}
}
Home.Js
import React, { Component } from 'react';
import '../components/Home.css';
import {
BrowserRouter as Router,
Routes,
Route,
} from "react-router-dom";
import Romance from ‘./Romance’;
import Action from ‘./Action’;
import Horror from ‘./Horror’;
import Comedy from ‘./Comedy’;
import Buttons from './Buttons';
export default class Home extends Component{
render(){
return(
<Router>
<Buttons/>
<Routes>
<Route path=“/romance” element={<Romance/>} />
<Route path=“/action” element={<Action />} />
<Route path=“/horror” element={<Horror />} />
<Route path=“/comedy” element={<Comedy />} />
</Routes>
<div>
</div>
</Router>
)
}
}
Buttons.js
import React, { Component } from 'react';
import RomanceButton from './RomanceButton';
import ComedyButton from './ComedyButton';
import ActionButton from './ActionButton ';
import HorrorButton from './HorrorButton';
export default class Buttons extends Component{
render(){
return(
<div>
<RomanceButton/>
<ComedyButton/>
<ActionButton/>
<HorrorButton/>
</div>
)
}
}
注意：所有卡片组件都遵循相同的结构。唯一的区别是他们的名字。
Card.css
.card{
padding: 0px;
background-color: #121212;
margin-bottom: 10px;
margin: 10px;
align-items: center,
}
Romance.Card.js
import '../components/Card.css';
const RomanceCard = () => {
return (
<div class="card">
<div class="card-body">
<img src={process.env.PUBLIC_URL + '/romance.png'} alt="logo" />
</div>
</div>
)
}
export default RomanceCard;
RomanceButton.js
import { Link } from 'react-router-dom';
import RomanceCard from './RomanceCard';
const RomanceButton = () => {
return (
<Link className='btn' to=‘/romance’>
<div>
<RomanceCard/>
</div>
</Link>
)
}
export default RomanceButton;
Romance.js
import React, { Component } from 'react';
export default class Romance extends Component{
render(){
return(
<div>
<h1> THIS IS THE ROMANCE PAGE. HERE ARE THE LIST OF SONGS: </h1>
{*/List of songs/*)
</div>
)
}
}
我使用的是什么语言？
反应，Javascript，Css
其他信息：
当前安装的 npm 包：
npx install create-react-app .
npm install react-bootstrap
npm Install react-router-dom
所有 Package.json 依赖项：
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.5",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"navbar": "^2.1.0",
"react": "^18.0.0",
"react-bootstrap": "^2.2.3",
"react-dom": "^18.0.0",
"react-is": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
你怎么看？
非常感谢您的宝贵时间！
- Zpo
每个应用程序只需要一个路由器。链接和路由都应该在同一个路由上下文中呈现。
将 Router 移动到 App。
function App() {
return (
<div className="App">
<Router>
<NavbarA/>
<Home/>
</Router>
<div>
...
</div>
</div>
);
}
从 NavbarA 和 Home 移除路由器。
class NavbarA extends Component {
render() {
return (
<>
<div>
<Navbar bg="dark" variant={"dark"} expand="lg">
<Container>
<Navbar.Brand href="/home">
<img
src={process.env.PUBLIC_URL + "/spotifly.png"}
alt="logo"
/>
</Navbar.Brand>
<Navbar.Brand />
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link as={Link} to={"/home"}>
Home
</Nav.Link>
<Nav.Link as={Link} to={"/about"}>
About
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
<div>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</div>
</>
);
}
}
...
class Home extends Component {
render() {
return (
<>
<Buttons />
<Routes>
<Route path="/romance" element={<Romance />} />
<Route path="/action" element={<Action />} />
<Route path="/horror" element={<Horror />} />
<Route path="/comedy" element={<Comedy />} />
</Routes>
<div></div>
</>
);
}
}
我的项目：
这是一个电影列表项目。此应用程序用作电影流媒体服务，用户有 4 种类型可供选择。 （浪漫、恐怖、喜剧和动作）。流派由可点击的卡片组件显示，点击后会转到各自的页面（显示他们选择的电影）。
问题：
我目前遇到路由问题。例如，如果用户单击浪漫类型按钮。 URL会显示localhost:3000/romance. ，表示页面已经路由。
返回了什么？
功能齐全的导航栏
所有 4 个流派卡片组件再次返回，在我看来它们嵌套在主页正文的顶部。
Romance.js 文件（电影列表应该在其中）也被返回，但它显示在类型卡按钮组件下。
有什么方法可以只在主屏幕上嵌套流派卡片按钮组件，并在我转到任何流派页面时让它们消失？
我知道这听起来可能令人困惑，因为英语是我的第二语言。如果您需要更好的解释，请随时在评论中询问我。
代码：
App.js
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import NavbarA from './components/NavbarA';
import Home from './components/Home';
function App() {
return (
<div className="App">
<NavbarA/>
<Home/>
<div>
</div>
</div>
);
}
export default App;
Navbar.js
import React, { Component } from 'react';
import { Navbar,Nav, Container } from 'react-bootstrap';
import {
BrowserRouter as Router,
Routes,
Route,
Link
} from "react-router-dom";
import Home from './Home';
import About from './About';
export default class NavbarA extends Component{
render(){
return (
<Router>
<div>
<Navbar bg="dark" variant={"dark"} expand="lg">
<Container>
<Navbar.Brand href ="/home">
<img src={process.env.PUBLIC_URL + '/spotifly.png'} alt="logo" />
</Navbar.Brand>
<Navbar.Brand/>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link as ={Link} to = {"/home"}>Home</Nav.Link>
<Nav.Link as ={Link} to = {"/about"}>About</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
<div>
<Routes>
<Route path="/" element={<Home/>} />
<Route path="/about" element={<About />} />
</Routes>
</div>
</Router>
)
}
}
Home.Js
import React, { Component } from 'react';
import '../components/Home.css';
import {
BrowserRouter as Router,
Routes,
Route,
} from "react-router-dom";
import Romance from ‘./Romance’;
import Action from ‘./Action’;
import Horror from ‘./Horror’;
import Comedy from ‘./Comedy’;
import Buttons from './Buttons';
export default class Home extends Component{
render(){
return(
<Router>
<Buttons/>
<Routes>
<Route path=“/romance” element={<Romance/>} />
<Route path=“/action” element={<Action />} />
<Route path=“/horror” element={<Horror />} />
<Route path=“/comedy” element={<Comedy />} />
</Routes>
<div>
</div>
</Router>
)
}
}
Buttons.js
import React, { Component } from 'react';
import RomanceButton from './RomanceButton';
import ComedyButton from './ComedyButton';
import ActionButton from './ActionButton ';
import HorrorButton from './HorrorButton';
export default class Buttons extends Component{
render(){
return(
<div>
<RomanceButton/>
<ComedyButton/>
<ActionButton/>
<HorrorButton/>
</div>
)
}
}
注意：所有卡片组件都遵循相同的结构。唯一的区别是他们的名字。
Card.css
.card{
padding: 0px;
background-color: #121212;
margin-bottom: 10px;
margin: 10px;
align-items: center,
}
Romance.Card.js
import '../components/Card.css';
const RomanceCard = () => {
return (
<div class="card">
<div class="card-body">
<img src={process.env.PUBLIC_URL + '/romance.png'} alt="logo" />
</div>
</div>
)
}
export default RomanceCard;
RomanceButton.js
import { Link } from 'react-router-dom';
import RomanceCard from './RomanceCard';
const RomanceButton = () => {
return (
<Link className='btn' to=‘/romance’>
<div>
<RomanceCard/>
</div>
</Link>
)
}
export default RomanceButton;
Romance.js
import React, { Component } from 'react';
export default class Romance extends Component{
render(){
return(
<div>
<h1> THIS IS THE ROMANCE PAGE. HERE ARE THE LIST OF SONGS: </h1>
{*/List of songs/*)
</div>
)
}
}
我使用的是什么语言？
反应，Javascript，Css
其他信息：
当前安装的 npm 包：
npx install create-react-app .
npm install react-bootstrap
npm Install react-router-dom
所有 Package.json 依赖项：
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.5",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"navbar": "^2.1.0",
"react": "^18.0.0",
"react-bootstrap": "^2.2.3",
"react-dom": "^18.0.0",
"react-is": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
你怎么看？
非常感谢您的宝贵时间！
- Zpo
每个应用程序只需要一个路由器。链接和路由都应该在同一个路由上下文中呈现。
将 Router 移动到 App。
function App() {
return (
<div className="App">
<Router>
<NavbarA/>
<Home/>
</Router>
<div>
...
</div>
</div>
);
}
从 NavbarA 和 Home 移除路由器。
class NavbarA extends Component {
render() {
return (
<>
<div>
<Navbar bg="dark" variant={"dark"} expand="lg">
<Container>
<Navbar.Brand href="/home">
<img
src={process.env.PUBLIC_URL + "/spotifly.png"}
alt="logo"
/>
</Navbar.Brand>
<Navbar.Brand />
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link as={Link} to={"/home"}>
Home
</Nav.Link>
<Nav.Link as={Link} to={"/about"}>
About
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
<div>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</div>
</>
);
}
}
...
class Home extends Component {
render() {
return (
<>
<Buttons />
<Routes>
<Route path="/romance" element={<Romance />} />
<Route path="/action" element={<Action />} />
<Route path="/horror" element={<Horror />} />
<Route path="/comedy" element={<Comedy />} />
</Routes>
<div></div>
</>
);
}
}