Switch 语句依赖于 React-Router Route答案

【问题标题】：Switch statement depends on React-Router RouteSwitch 语句依赖于 React-Router Route
【发布时间】：2020-05-17 15:57:09
【问题描述】：

我正在尝试更改 p 中的文本取决于启用了哪个 Route。我试图用 switch 语句来做这个，但老实说不知道怎么做，有什么想法吗？

import React from 'react';
import '../styles/Main.css'
import { Switch, Route } from 'react-router-dom';
import DaysWeather from '../pages/DaysWeather';
import WorldWeather from '../pages/WorldWeather'
import CurrentWeather from '../pages/CurrentWeather';

const Main = () => {

return (<>
    <main>
        <p>Sprawdź pogodę w swoim mieście</p>
        <Switch>
            <Route path="/" exact component={CurrentWeather} />
            <Route path="/daysweather" exact component={DaysWeather} />
            <Route path="/worldweather" exact component={WorldWeather} />
        </Switch>
   </main>


</>);
}


export default Main;

【问题讨论】：

标签： javascript html reactjs react-router

【解决方案1】：

我认为您使用 switch 语句的想法是正确的。这是我的实现：

/* Main.js */

import React, { useState, useEffect } from "react";
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
import "./styles.css";
import WorldWeather from "./components/WorldWeather";
import DaysWeather from "./components/DaysWeather";
import CurrentWeather from "./components/CurrentWeather";

function getParaText() {
  const route = window.location.pathname;
  switch (route) {
    case "/":
      return "Current Weather Header";
    case "/daysweather":
      return "Days Weather Header";
    case "/worldweather":
      return "World Weather Header";
  }
}

export default function Main() {
  const [paraText, setParaText] = useState(getParaText());
  const changeOnNewRoute = () => {
    setParaText(getParaText());
  };

  return (
    <main>
      <BrowserRouter>
        <p>{paraText}</p>
        <div>
          <Link style={{ marginRight: "20px" }} to="/">
            CurrentWeather
          </Link>
          <Link style={{ marginRight: "20px" }} to="/daysweather">
            DaysWeather
          </Link>
          <Link style={{ marginRight: "20px" }} to="/worldweather">
            WorldWeather
          </Link>
        </div>
        <Switch>
          <Route
            exact
            path="/"
            render={props => (
              <CurrentWeather changeOnNewRoute={changeOnNewRoute} />
            )}
          />
          <Route
            exact
            path="/daysweather"
            render={props => (
              <DaysWeather changeOnNewRoute={changeOnNewRoute} />
            )}
          />
          <Route
            exact
            path="/worldweather"
            render={props => (
              <WorldWeather changeOnNewRoute={changeOnNewRoute} />
            )}
          />
        </Switch>
      </BrowserRouter>
    </main>
  );
}

/* Child Component */

import React, { useEffect } from "react";

const CurrentWeather = props => {
  useEffect(() => {
    props.changeOnNewRoute();
  });
  return <div>This is the CurrentWeather Component</div>;
};

export default CurrentWeather;

编辑：添加带有状态的最终实现以供将来使用

【讨论】：

对不起，原版一团糟。我完全混淆了基于功能和类的组件。编辑后的版本现在可以在我的机器上运行。
是的，我试过了，但是当我改变路由路径时这个函数不会重新渲染。
嗯，是的，如果你想持久化更改，你将不得不使用状态，这就是 React 的美妙之处。这是一个使用上述内容的工作codesandbox，希望能帮助解释您应该如何考虑您的 React 代码，祝您好运！

【解决方案2】：

您可以通过props.location.pathname访问当前路线

 <Router>
      <div>
        <Nav />
        <hr />

       <Switch>
        <Route path="/" exact component={CurrentWeather} />
        <Route path="/daysweather" exact component={DaysWeather} />
        <Route path="/worldweather" exact component={WorldWeather} />
       </Switch>
      </div>
  </Router>

使用withRouter，您可以访问历史对象的属性

function Nav(props) {
  return (
    <div>
      <h2>
        Current Route : {props.location.pathname}
      </h2>
    </div>
  );
}
export default withRouter(Nav);

看看这个sample，可能会有所帮助

【讨论】：