Switch 语句依赖于 React-Router 路由

Question

i'm trying to change text in p depends on which Route is enabled. I was trying to make this with switch statement, but honestly don't know how, any ideas?

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;

Answer 1

You can access to current route with 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>

With withRouter ,You can get access to the history object's properties

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

look at this sample ,could be helpfull

Answer 2

I think you were on to the right idea using a switch statement. This is my implementation:

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

Edit: added the final implementation with state for future use