如何在引导导航栏中使用反应路由器 dom

Question

我正在尝试使用 react 路由器 dom 来导航来自自定义导航栏的链接。以下是代码结构。

cust navbar 包含所有需要路由的链接。

CustNavbar.js

import React, { Component } from "react";
import ReactBootstrap, {
  Navbar,
  Nav,
  NavItem,
  Button,
  Form,
  FormControl,
  NavDropdown
} from "react-bootstrap";

import { Link } from "react-router-dom";
import { LinkContainer } from "react-router-bootstrap";

import "./socialstyle.css";
import "./links.css";

import "./alldata.js";

export default class CustNavbar extends Component {
  render() {
    return (
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
        <Navbar.Brand href="/abc">abc</Navbar.Brand>

        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="mr-auto links">
            <Nav.Link href="/alldata">Alldata</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

alldata.js

import React, { Component } from "react";
import ReactBootstrap, {
  Navbar,
  Nav,
  NavItem,
  Button,
  Form,
  FormControl,
  NavDropdown
} from "react-bootstrap";

export default class Alldata extends Component {
  render() {
    return (
      <div>
        <h1>Alldata</h1>
        <p>content</p>
      </div>
    );
  }
}

home.js

import React, { Component } from "react";
import ReactBootstrap, {
  Navbar,
  Nav,
  NavItem,
  Button,
  Form,
  FormControl,
  NavDropdown
} from "react-bootstrap";

import { Link } from "react-router-dom";
import { LinkContainer } from "react-router-bootstrap";
import Carousel from "react-bootstrap/Carousel";

import "bootstrap/dist/css/bootstrap.min.css";   
import "./carosel.css";
import "./socialstyle.css";
import "./links.css";
import "./alldata.js";


import styled from "styled-components";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faYoutube,
  faFacebook,
  faTwitter
} from "@fortawesome/free-brands-svg-icons";


export default class Home extends Component {
  render() {
    return (
      <React.fragment>
        <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
          <Navbar.Brand href="/abc">abc</Navbar.Brand>

          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="mr-auto links">
              <Nav.Link href="/alldata">Alldata</Nav.Link>
              
            </Nav>
          </Navbar.Collapse>
        </Navbar>

        <Carousel>
          <Carousel.Item>
            <img className="d-block w-100" src={slide01} alt="First slide" />
            <div class="absolute-div">
              <Carousel.Caption>
                <h2>
                  {" "}
                  hello1.{" "}
                </h2>
              </Carousel.Caption>
            </div>
          </Carousel.Item>
          <Carousel.Item>
            <img className="d-block w-100" src={slide02} alt="Second slide" />
            <Carousel.Caption>
              <h2>hello2 </h2>
            </Carousel.Caption>
          </Carousel.Item>

          <Carousel.Item>
            <img className="d-block w-100" src={slide03} alt="Third slide" />
            <Carousel.Caption>
              <h2> hello3 </h2>
            </Carousel.Caption>
          </Carousel.Item>
        </Carousel>
        </div>
      </React.fragment>
    );
  }
}

App.js

import React, { Fragment, Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Button } from "react-bootstrap";
import CustNavbar from "./Components/CustNavbar";
import Alldata from "./Components/alldata";
import Home from "./Components/home";  
import Carasel from "./Components/carosel";

class App extends Component {
  render() {
    return (
      <Router>
        <CustNavbar />
         <Route path="/abc" exact={true} component={Home} />
         <Route path="/Alldata" exact={true} component={Alldata} />
      </Router>
    );
  }
}

export default App;

现在的问题是，各个链接没有加载各自的数据。我的意思是即使我加载 /abc 它也会加载所有内容以及 /alldata 。似乎路由器 dom 有问题，但无法弄清楚。

需要进行一些代码重构才能加载正确的内容？

Answer 1

已解决。 这是由于路径配置错误。我们需要在路由器周围使用switch