javascript - 路径更改但未渲染组件
问题描述
React 路由器没有渲染我的组件。我没有收到任何错误,并且 URL 正在更改为正确的路径。
//App component
import React, { Component } from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import AppNavbar from "./components/layout/Nav";
import Home from "./components/Home";
import Category from "./components/create/Category";
import Item from "./components/create/Item";
import StockCategory from "./components/category/StockCategory";
import SignIn from "./components/auth/SignIn";
import Book from "./components/book/Book";
export class App extends Component {
state = {
stockItems: [
{
category: "events",
name: "Keg",
booked: true,
id: 1
},
{
category: "events",
name: "tent",
booked: false,
id: 2
},
{
category: "events",
name: "speakers",
booked: true,
id: 3
},
{
category: "production",
name: "camera",
booked: true,
id: 4
},
{
category: "production",
name: "drone",
booked: false,
id: 5
},
{
category: "production",
name: "video camera",
booked: true,
id: 6
}
],
categories: ["Events", "Production"]
};
render() {
return (
<Router>
<div className="App">
<AppNavbar />
<br />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/new/category" component={Category} />
<Route path="/new/item" component={Item} />
{this.state.categories.map(item => {
return (
<Route
id={item}
path="/category/:id"
component={StockCategory}
/>
);
})}
<Route path="/signin" component={SignIn} />
<Route exact path="/book" component={Book} />
</Switch>
</div>
</Router>
);
}
}
export default App;
//Book component
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Button, Form, FormGroup, Label, Input, FormText } from "reactstrap";
export class Book extends Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col">
<h2>Item Name</h2>
</div>
</div>
<Form>
<FormGroup>
<Input
type="text"
name="Use"
id="Use"
placeholder="What are you using this for?"
/>
</FormGroup>
<FormGroup>
<Input
type="number"
name="Quantity"
id="qty"
placeholder="Quantity"
/>
</FormGroup>
<FormGroup>
<Input
type="date"
name="Return Date"
id="returnDate"
placeholder="Return Date"
/>
</FormGroup>
<br />
<br />
<Button>Book</Button>
</Form>
</div>
);
}
}
export default Book;
//stockCategory component
import React, { Component } from "react";
import { Link } from "react-router-dom";
import All from "./All";
import Available from "./Available";
import Booked from "./Booked";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Book from "../book/Book";
export class StockCategory extends Component {
state = {
stockItems: [
{
category: "events",
name: "Keg",
booked: true,
id: 1
},
{
category: "events",
name: "tent",
booked: false,
id: 2
},
{
category: "events",
name: "speakers",
booked: true,
id: 3
},
{
category: "production",
name: "camera",
booked: true,
id: 4
},
{
category: "production",
name: "drone",
booked: false,
id: 5
},
{
category: "production",
name: "video camera",
booked: true,
id: 6
}
],
categories: ["Events", "Production"]
};
componentDidMount() {
console.log(this.props.match);
}
render() {
return (
<Router>
<div className="container text-center">
<h1 className="text-center">
{this.props.match.params.id.toUpperCase()}
</h1>
<br />
<div className="row">
<div className="col text-center">
<ul class="pagination justify-content-center">
<li class="page-item">
<Link
class="page-link"
to={`/category/${this.props.match.params.id}`}
>
All
</Link>
</li>
<li class="page-item">
<Link
class="page-link"
to={`/category/${this.props.match.params.id}/available`}
>
Available
</Link>
</li>
<li class="page-item">
<Link
class="page-link"
to={`/category/${this.props.match.params.id}/booked`}
>
Booked
</Link>
</li>
</ul>
</div>
</div>
<Switch>
<Route
id={this.props.match.params.id}
exact
path={`/category/:id`}
component={All}
/>
<Route
id={this.props.match.params.id}
exact
path={`/category/:id/available`}
component={Available}
/>
<Route
id={this.props.match.params.id}
exact
path={`/category/:id/booked`}
component={Booked}
/>
</Switch>
</div>
</Router>
);
}
}
export default StockCategory;
//child of stockCategory
import React, { Component } from "react";
import { Card, Button, CardTitle, CardText } from "reactstrap";
import { Link } from "react-router-dom";
export class All extends Component {
state = {
stockItems: [
{
category: "Events",
name: "Keg",
booked: true,
id: 1
},
{
category: "Events",
name: "tent",
booked: false,
id: 2
},
{
category: "Events",
name: "speakers",
booked: true,
id: 3
},
{
category: "Production",
name: "camera",
booked: true,
id: 4
},
{
category: "Production",
name: "drone",
booked: false,
id: 5
},
{
category: "Production",
name: "video camera",
booked: true,
id: 6
}
],
categories: ["Events", "Production"]
};
componentDidMount() {
console.log(this.props.match);
}
render() {
return (
<div className="container">
{this.state.stockItems.map(item => {
if (
item.booked === true &&
item.category === this.props.match.params.id
) {
return (
<ul className="list-group">
<li className="list-group-item">
{item.name} <Button color="success">Return</Button>
</li>
</ul>
);
} else if (
item.booked !== true &&
item.category === this.props.match.params.id
) {
return (
<ul className="list-group">
<li className="list-group-item">
{item.name}{" "}
<Link to="/book">
<Button color="danger">Book</Button>
</Link>
</li>
</ul>
);
} else return null;
})}
</div>
);
}
}
export default All;
我读过你的路线顺序很重要,但这似乎也没有帮助。不太确定可能是什么问题。任何帮助将非常感激!
要添加更多详细信息,当我单击它时,<Link/>
它会将我带到正确的 URL,但不显示组件。但是,如果我重新加载页面,那么组件会显示吗?
解决方案
事实证明,您只能在组件树中使用一次 browserRouter。从第二个组件中删除 browserRouter 后,一切正常。
推荐阅读
- python - 如果它的元素满足Python中的条件,如何有效地提取列表索引
- parameters - 如何调整 OOV 字的 FastText 参数?
- dolphindb - 如何获取 DolphinDB 中每个设备的最新记录?
- java - 前台服务重启问题
- opencv - Bazel 从依赖项构建 `ios_framework` 导出标头
- python - 在无网格图像Python Opencv上画线
- javascript - 将参数从 JS 传递给 Struts2 Action 方法
- c# - 如何将参数放入 json 正文中?
- firebase - 访问与 Auth uid 匹配的集合的 Firestore 规则
- qt - 如何为 aarch64 架构编译 QT5.9 Webenginewidgets?