Я создал домашнюю страницу, используя реакционную ленту и hashrouter. Но роутер не работает - PullRequest
Новая
       48

Я создал домашнюю страницу, используя реакционную ленту и hashrouter. Но роутер не работает

0 голосов
/ 05 сентября 2018 
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 и пытаюсь создать домашнюю страницу . Кроме того, я использую хэш-маршрутизатор , для визуализации представлений. Но проблема в том, что хэш-маршрутизатор работал до того, как были вызваны классы реакционной ленты . Но однажды после включения класса реактивной ленты представления не рендеринг . В окне консоли я получаю эту ошибку. введите описание изображения здесь . Какое решение?

Ответы [ 2 ]

0 голосов
/ 05 сентября 2018

Проблема в том, что вы пытаетесь передать точный в NavLink. Эту опору следует передавать только компоненту Route. NavLink думает, что это простая опора, и просит вас поместить какой-нибудь атрибут внутрь. Реактивная маршрутизация - довольно большая тема для обучения. Лучший учебник для этого - Тренировка React Router . Пожалуйста, пройдите через это, и вы увидите всю картину.

0 голосов
/ 05 сентября 2018

Удалите exact из этого кода ниже. 

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

обновить вышеуказанный код с помощью. 

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