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

Posted 2023-03-23

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

【英文标题】：I have created a home page using reactstrap and hashrouter. But the router views are not working

【发布时间】：2019-02-10 05:44:06

【问题描述】：

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 的新手，我正在尝试创建一个 主页。另外，我使用 hash router 来呈现视图。但问题是：哈希路由器在 reactstrap 类 被调用之前就已经工作了。但是一旦包含 reactstrap 类，视图就不会呈现。在控制台窗口中，我收到此错误。 enter image description here 。解决办法是什么？

【问题讨论】：

您是否遇到任何控制台错误？

我已在帖子中包含错误。

你为什么要在这里传递exact？从<NavItem> <NavLink exact to="/">Home</NavLink> </NavItem>中删除它

【参考方案1】：

从下面的代码中删除exact。

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

更新上面的代码。

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

【讨论】：

您是否从NavLink 中删除了exact ？

它应该可以解决，否则在重定向时检查您通过exact 的地方。

没有。它仍然无法正常工作。我又从头开始编码了。如果一切顺利，我会告诉你的。

我确定这是一个愚蠢的错误，只需在重新开始之前检查您的代码一次。

是的，我想通了。来自“react-dom”的 NavLink 和来自“reactstrap”的 NavLink 之间存在冲突。但是我们可以将它重命名为“NavLink as navlink”，在实现时我们可以写成 Home。非常感谢您的帮助。

【参考方案2】：

问题在于您试图将精确传递给NavLink。这个道具应该只传递给Route 组件。 NavLink 认为这是一个简单的道具，并要求您在其中放入一些属性。 React 路由是一个相当大的学习主题。最好的教程是React Router training。 请浏览一下，您会看到完整的画面。