路径更改但未渲染组件

Question

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，但不显示组件。但是如果我重新加载页面然后组件显示？

Answer 1

原来你只能在组件树中使用一次 browserRouter。当我从第二个组件中删除 browserRouter 后，一切正常。