Javascript Switch语句取决于React路由器路由

我试图更改p中的文本，这取决于启用了哪个路由。我想用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;

从“React”导入React；
导入“../styles/Main.css”
从“react router dom”导入{Switch，Route}；
从“../pages/dayseagher”导入Dayseagher；
从“../pages/WorldWeather”导入WorldWeather
从“../pages/CurrentWeather”导入CurrentWeather；
常量Main=（）=>{
返回(
斯帕瓦德·波戈德·斯沃姆·米奇（Sprawdźpogodęw swoim mieście）

);
}
导出默认主；

您可以使用

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>

---

看看这个，可能会很有帮助

我认为您使用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>
  );
}

/*Main.js*/
从“React”导入React，{useState，useffect}；
从“react router dom”导入{BrowserRouter，Route，Switch，Link}；
导入“/styles.css”；
从“/components/WorldWeather”导入WorldWeather；
从“/components/Dayseagher”导入Dayseagher；
从“/components/CurrentWeather”导入CurrentWeather；
函数getParaText（）{
const route=window.location.pathname；
道岔（进路）{
案例“/：
返回“当前天气标题”；
案例“/她”：
返回“天天气标题”；
案例“/世界天气”：
返回“世界天气标题”；
}
}
导出默认函数Main（）{
const[paraText，setParaText]=useState（getParaText（））；
const changeonnerRoute=（）=>{
setParaText（getParaText（））；
};
返回(
{paraText}

当前天气
白日做梦
世界天气
(
)}
/>
(
)}
/>
(
)}
/>
);
}

/*子组件*/
从“React”导入React，{useffect}；
const CurrentWeather=props=>{
useffect（（）=>{
props.changeOnNewRoute（）；
});
返回这是当前天气组件；
};
输出默认天气；

---

编辑：添加了状态为将来使用的最终实现

对不起，原来的实现一团糟。我完全混淆了函数和基于类的组件。编辑后的版本现在可以在我的机器上运行。是的，我尝试过这个功能，但是当我更改路径时，这个功能不会重新渲染。是的，如果你想保持更改，你必须使用状态，这就是React的美妙之处。下面是一个使用上述方法的工作，希望能够帮助解释您应该如何思考您的React代码，祝您好运！

/* 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;