如何在引导导航栏中使用React Router Dom

问题描述

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

cust导航栏包含所有需要路由的链接。

CustNavbar.js

npm install (or other install package depending on your package manager)
npm run build (or ionic build if using ionic)
npx cap sync (this copies files and generates non committed files)

alldata.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>
    );
  }
}

home.js

import React,NavDropdown
} from "react-bootstrap";

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

App.js

import React,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>
    );
  }
}

现在的问题是，各个链接未加载其各自的数据。我的意思是，即使我加载了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。路由器dom似乎有些问题，但无法解决。

需要一些代码重构才能加载适当的内容？

解决方法

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