javascript - 为什么 React Router 会导致 Web 应用程序崩溃？

Question

链接到CodeSandbox明白我的意思。

当您在路由器/交换机就位的情况下加载应用程序时，网络应用程序根本不会加载。空白屏幕。

但是，如果您注释掉下面的代码:

<Switch>
   <Route exact path="/" component={App} />
     <Route
       exact
       path="/tavares"
       component={() => <Tavares data={data.tavares} />}
      />
      <Route
        exact
        path="/matthews"
        component={() => <Matthews data={data.matthews} />}
      />
    <Route
      exact
      path="/marner"
      component={() => <Marner data={data.marner} />}
    />
</Switch>

应用程序再次加载。

我正在从 NHL API 获取三名球员的数据，上面的代码将数据传递到其他组件中。我不确定这是否会导致某种滞后或什么。

App.js

import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { Container, Row, Col, Card } from "reactstrap";
import ReactDOM from "react-dom";
import axios from "axios";
import styled from "styled-components";
import { createGlobalStyle } from "styled-components";
import "bootstrap/dist/css/bootstrap.min.css";

import Intro from "./components/Intro";
import Tavares from "./components/Tavares";
import Matthews from "./components/Matthews";
import Marner from "./components/Marner";

import TavaresImg from "./img/tavares.jpg";
import MatthewsImg from "./img/matthews.jpg";
import MarnerImg from "./img/marner.jpg";

import "./styles.css";

function App() {
  // Set initial state for data
  const [data, setData] = useState({ tavares: [], matthews: [], marner: [] });

  // Fetch data
  useEffect(() => {
    const fetchData = async () => {
      // Grab all players API's
      let tavares =
        "https://statsapi.web.nhl.com/api/v1/people/8475166?expand=person.stats&stats=yearByYear,careerRegularSeason&expand=stats.team&site=en_nhlCA";
      let matthews =
        "https://statsapi.web.nhl.com/api/v1/people/8479318?expand=person.stats&stats=yearByYear,careerRegularSeason&expand=stats.team&site=en_nhlCA";
      let marner =
        "https://statsapi.web.nhl.com/api/v1/people/8478483?expand=person.stats&stats=yearByYear,careerRegularSeason&expand=stats.team&site=en_nhlCA";
      // Axios to get all api's
      axios
        .all([axios.get(tavares), axios.get(matthews), axios.get(marner)])
        .then(
          axios.spread((tavares, matthews, marner) => {
            setData({
              tavares: [tavares.data.people[0]],
              matthews: [matthews.data.people[0]],
              marner: [marner.data.people[0]]
            });
          })
        );
    };
    fetchData();
  }, []);

  return (
    <>
      <Router>
        <GlobalStyle />
        <Intro
          main="Maple Leafs API"
          text="Built with React, React Hooks, Styled Components and Axios
                consuming the NHL's REST API."
        />
        <Flex>
          <Container>
            <RowWrap>
              <Row>
                <Col lg="4">
                  <Image>
                    <img src={TavaresImg} alt="Tavares" />
                  </Image>
                </Col>
                <Col lg="8">
                  <CardBody>
                    {data.tavares.map(item => (
                      <>
                        <Title>
                          <h1>{item.fullName}</h1>
                        </Title>
                        <Number>{item.primaryNumber}</Number>
                        <p>{item.primaryPosition.name}</p>
                      </>
                    ))}
                    <ButtonLink>
                      <Link to="/tavares">
                        <button>View Profile</button>
                      </Link>
                    </ButtonLink>
                  </CardBody>
                </Col>
              </Row>
            </RowWrap>
            <RowWrap>
              <Row>
                <Col lg="4">
                  <Image>
                    <img src={MatthewsImg} alt="Matthews" />
                  </Image>
                </Col>
                <Col lg="8">
                  <CardBody>
                    {data.matthews.map(item => (
                      <>
                        <Title>
                          <h1>{item.fullName}</h1>
                        </Title>
                        <Number>{item.primaryNumber}</Number>
                        <p>{item.primaryPosition.name}</p>
                      </>
                    ))}
                    <ButtonLink>
                      <Link to="/matthews">
                        <button>View Profile</button>
                      </Link>
                    </ButtonLink>
                  </CardBody>
                </Col>
              </Row>
            </RowWrap>
            <RowWrap>
              <Row>
                <Col lg="4">
                  <Image>
                    <img src={MarnerImg} alt="Marner" />
                  </Image>
                </Col>
                <Col lg="8">
                  <CardBody>
                    {data.marner.map(item => (
                      <>
                        <Title>
                          <h1>{item.fullName}</h1>
                        </Title>
                        <Number>{item.primaryNumber}</Number>
                        <p>{item.primaryPosition.name}</p>
                      </>
                    ))}
                    <ButtonLink>
                      <Link to="/marner">
                        <button>View Profile</button>
                      </Link>
                    </ButtonLink>
                  </CardBody>
                </Col>
              </Row>
            </RowWrap>
          </Container>
        </Flex>
        <Container>
          <Row>
            <Col lg="12">
              <Switch>
                <Route exact path="/" component={App} />
                <Route
                  exact
                  path="/tavares"
                  component={() => <Tavares data={data.tavares} />}
                />
                <Route
                  exact
                  path="/matthews"
                  component={() => <Matthews data={data.matthews} />}
                />
                <Route
                  exact
                  path="/marner"
                  component={() => <Marner data={data.marner} />}
                />
              </Switch>
            </Col>
          </Row>
        </Container>
      </Router>
    </>
  );
}

// Styles

const GlobalStyle = createGlobalStyle`
  body,html {
    background: #eaeaea;
    padding-top: 20px;
    font-family: 'Roboto', sans-serif;
  }
`;

const Flex = styled.div`
  display: flex;
`;

const Image = styled.div`
  img {
    width: 100%;
  }
`;

const Title = styled.h1`
  font-size: 20px !important;
  font-weight: bold;
  color: #396afc;
`;

const Number = styled.h3`
  font-size: 30px;
`;

const RowWrap = styled.div`
  margin-top: 30px;
  background: #fff;
  @media (min-width: 992px) {
    .col-lg-4,
    .col-lg-8 {
      padding: 0px;
    }
  }
`;

const CardBody = styled.div`
  padding: 30px;
  text-align: center;
  @media (min-width: 1200px) {
    margin-top: 60px !important;
  }
  @media (min-width: 992px) {
    margin-top: 30px;
  }
`;

const ButtonLink = styled.div`
  button {
    width: 100%;
    background: #396afc;
    color: #fff;
    border: none;
    transition: 0.2s;
    padding: 10px 0px 10px 0px;
    &:hover {
      background: #2846f7;
    }
  }
`;

export default App;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

如果路径是 /，看起来 App 会尝试渲染自身。可能这是你的问题。

如果你考虑一下在不破坏的情况下会产生什么影响，这是有道理的。它会无限地将自己呈现为一个 child 。