我使用reactstrap和hashrouter创建了一个主页。但是路由器视图不起作用

Question

import React, { Component } from "react";
import { Route, HashRouter } from 'react-router-dom';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from 'reactstrap';

import Home from "./Home";
import Shop from "./Shop";
import About from "./About";
import Banner from "./Banner";
import Footer from "./Footer";



class Main extends Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  render() {
    return (
      <HashRouter>
        <div>
          <Navbar color="light" light expand="md">
            <NavbarBrand href="/">iFashion</NavbarBrand>
            <NavbarToggler onClick={this.toggle} />
            <Collapse isOpen={this.state.isOpen} navbar>
              <Nav className="ml-auto" navbar>
                <NavItem>
                  <NavLink exact to="/">Home</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink to="/shop">Shop</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink to="/about">About</NavLink>
                </NavItem>
                <UncontrolledDropdown nav inNavbar>
                  <DropdownToggle nav caret>
                    Options
                </DropdownToggle>
                  <DropdownMenu right>
                    <DropdownItem>
                      Option 1
                  </DropdownItem>
                    <DropdownItem>
                      Option 2
                  </DropdownItem>
                    <DropdownItem divider />
                    <DropdownItem>
                      Reset
                  </DropdownItem>
                  </DropdownMenu>
                </UncontrolledDropdown>
              </Nav>
            </Collapse>
          </Navbar>

          <div className="content">
            <Route exact path="/" component={Home} />
            <Route path="/shop" component={Shop} />
            <Route path="/about" component={About} />
          </div>
          <Banner />
          <Footer />
        </div>
      </HashRouter>

    );
  }
}

export default Main;

我是Reactjs的新手，我正在尝试创建一个主页。另外，我正在使用哈希路由器来渲染视图。但问题是：哈希路由器在调用reactstrap类之前工作。但是一旦包含reactstrap类之后，视图就不会呈现。在控制台窗口中，我收到此错误。 enter image description here。解决办法是什么？

Answer 1

从以下代码中删除exact。

<NavItem>
   <NavLink exact to="/">Home</NavLink>
</NavItem>

使用更新上面的代码。

<NavItem>
   <NavLink to="/">Home</NavLink>
</NavItem>

Answer 2

问题是你试图将精确传递给NavLink。该道具应仅传递给Route组件。 NavLink认为这是一个简单的道具，并要求你把一些属性放在里面。反应路由是一个非常重要的学习主题。最好的教程是React Router training。请仔细阅读，你会看到整个画面。