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'));

如何在组件中创建React Browser实例？

1 个答案: