Question

我搞砸了React，我试图在路由器页面之间进行一些转换。在使用switch标记之前，我的代码工作正常，但是之后，roter将无法正常工作，并且没有呈现任何组件。

这是我的app.js

import React, { Component } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./App.scss";
import "./vendor/bootstrap/bootstrap-reboot.min.css";
import "./vendor/bootstrap/bootstrap-grid.css";
import Content from "./components/Content";
import Header from "./components/Header";
import Skills from "./components/Skills";
import Portfolio from "./components/Portfolio";
import Timeline from "./components/Timeline";
import Footer from "./components/Footer";
import Monitoria from "./components/Monitoria";
import About from "./components/About";
import Contact from "./components/Contact";

class App extends Component {
  state = {
    header_infos: [
      {
        job: "Desenvolvedor Web",
        college: "Faculdade Guararapes - Ciência da Computação 5º Período"
      }
    ]
  };

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Header />
          <Route
            render={(location) => (
              <TransitionGroup>
                <CSSTransition
                  key={location.key}
                  timeout={300}
                  classNames="fade"
                >
                  <Switch location={location}>
                    <Route exact path="/" component={Header} />
                    <Route
                      exact
                      path="/"
                      render={() => (
                        <Content
                          job={this.state.header_infos[0].job}
                          college={this.state.header_infos[0].college}
                        />
                      )}
                    />
                    <Route exact path="/" component={Skills} />
                    <Route exact path="/" component={Portfolio} />
                    <Route exact path="/" component={Timeline} />
                    <Route path="/monitoria" component={Monitoria} />
                    <Route path="/about" component={About} />
                    <Route path="/contact" component={Contact} />
                  </Switch>
                </CSSTransition>
              </TransitionGroup>
            )}
          />
          <Footer />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

如果需要，这是我的导航栏类：

import React from "react";
import "../sass/Header.scss";
import { NavLink } from "react-router-dom";

const Header = () => {
  return (
    <header className="">
      <NavLink exact to="/">
        <h1 className="logo">Logo</h1>
      </NavLink>
      <input type="checkbox" id="nav-toggle" className="nav-toggle" />
      <nav>
        <ul>
          <li className="menu-item">
            <NavLink to="/monitoria">Monitoria</NavLink>
          </li>
          <li className="menu-item">
            <NavLink to="/about">Sobre</NavLink>
          </li>
          <NavLink to="/contact" className="btn-rounded">
            <li className="menu-item">Fale comigo</li>
          </NavLink>
        </ul>
      </nav>
      <label htmlFor="nav-toggle" className="nav-toggle-label">
        <span />
      </label>
    </header>
  );
};

export default Header;

实际上，我不知道我以前是否在正确地使用路由器，因为我使用的是3。原因是我只需要将这3个组件加载到索引中，这就是我的解决方法。

在进行修改之前，我仅使用BrowserRouter和Route，没有任何开关，效果很好，但是没有过渡动画。因此，我尝试遵循一个教程，它说我需要使用Switch，现在什么都没有渲染，我真的不知道为什么。与往常一样，谢谢。

这是我遵循的教程：https://www.youtube.com/watch?v=NUQkajBdnmQ

Answer 1

Switch将仅呈现匹配的第一个Route或Redirect，因此仅呈现<Route exact path="/" component={Header} />，尽管看起来您已经在Switch之前进行了渲染。

                <Route
                  exact
                  path="/"
                  render={() => (
                    <Content
                      job={this.state.header_infos[0].job}
                      college={this.state.header_infos[0].college}
                    />
                  )}
                />
                <Route exact path="/" component={Skills} />
                <Route exact path="/" component={Portfolio} />
                <Route exact path="/" component={Timeline} />

这些组件均不会呈现，因为它们被开关忽略。

最好的选择是为路径/上需要的东西创建一个父组件，并在第一个（也是唯一的）exact path="/"路线中渲染它。

Answer 2

我想只有您的Header会用您现在的内容进行渲染。...

除非您想要该行为，否则不应使用switch。根据其文档https://reacttraining.com/react-router/core/api/Switch

它将呈现第一个符合条件的Route或Redirect。

使用Switch标签后，React-Router无法正常工作

2 个答案: