Switch 语句依赖于 React-Router Route

Posted 2023-02-21

【中文标题】Switch 语句依赖于 React-Router Route

【英文标题】：Switch statement depends on 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;

【参考方案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，可能会有所帮助