Как создать экземпляр React Browser Router в компоненте?

Question

Я новичок в реакции, и это мой первый проект в реакции.Я создал компонент AppRouter, который содержит маршрутизатор браузера, и когда я пытаюсь создать его экземпляр в классе приложения, приложение зависает при загрузке в браузере.Однако, когда я удаляю экземпляр AppRouter, приложение загружается в браузер, но навигационные ссылки не работают.

Пожалуйста, обратитесь к следующему коду:

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'normalize.css/normalize.css';
import './styles/styles.scss';
import {
    Collapse,
    Navbar,
    NavbarToggler,
    NavbarBrand,
    Nav,
    NavItem,
    NavLink,
    UncontrolledDropdown,
    DropdownToggle,
    DropdownMenu,
    DropdownItem } from 'reactstrap';

class TravelPlannr extends React.Component{

    render(){

        return(
            <div className='header-wrapper'>
                <Navigation />
            </div>
        );
    }
}

class Navigation extends React.Component{

    state = {
        isOpen: false
    };

    toggle() {
    this.setState({
        isOpen: !this.state.isOpen
    });
    }

    render(){

        return(
            <div>
                <AppRouter /> //this appears to be causing the loading issue
                <Navbar color="light" light expand="md">
                <NavbarBrand href="/">reactstrap</NavbarBrand>
                <NavbarToggler onClick={this.toggle} />
                <Collapse isOpen={this.state.isOpen} navbar>
                    <Nav className="ml-auto" navbar>
                    <NavItem>
                        <NavLink to="/create">Components</NavLink>
                    </NavItem>
                    </Nav>
                </Collapse>
                </Navbar>
            </div>
        );
    }
}

const Create = () => (
    <div>
        Create Page...
    </div>
);

const NotFoundPage = () => (
    <div>
        404 - Not Found...
    </div>
);

const AppRouter = () => (
    <BrowserRouter>
        <div>
            <Switch>
                <Route path="/" component={TravelPlannr} exact={true} />
                <Route path="/create" component={Create} />
                <Route component={NotFoundPage} />
            </Switch>
        </div>
    </BrowserRouter>
);

ReactDOM.render(<TravelPlannr />, document.querySelector('#root'));

Любое руководствоБуду признателен ... Заранее спасибо!

Answer 1

Проблема в том, что рекурсивная загрузка вашего AppRouter.AppRouter > TravelPlannr > Navigation > AppRouter и так далее.Вы можете использовать ссылку от react-router-dom для навигации по страницам.

import { Link } from 'react-router-dom'

<Link to="/create">Components</Link>

Я внес исправление в ваш код, пожалуйста, посмотрите

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Switch, Route, Link} from 'react-router-dom'; // Change in this line
import 'bootstrap/dist/css/bootstrap.min.css';
import 'normalize.css/normalize.css';
import './styles/styles.scss';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem } from 'reactstrap';

class TravelPlannr extends React.Component{

  render(){

    return(
      <div className='header-wrapper'>
        <Navigation />
      </div>
    );
  }
}

class Navigation extends React.Component{

  state = {
    isOpen: false
  };

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  render(){

    return(
      <div>
        <Navbar color="light" light expand="md">
          <NavbarBrand href="/">reactstrap</NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem>
                <Link to="/create">Components</Link> // change in this line
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}

const Create = () => (
  <div>
    Create Page...
  </div>
);

const NotFoundPage = () => (
  <div>
    404 - Not Found...
  </div>
);

const AppRouter = () => (
  <BrowserRouter>
    <div>
      <Switch>
        <Route path="/" component={TravelPlannr} exact={true} />
        <Route path="/create" component={Create} />
        <Route  component={NotFoundPage} /> // Change in this line
      </Switch>
    </div>
  </BrowserRouter>
);

ReactDOM.render(<AppRouter />, document.querySelector('#root'));