[英]Switch statement depends on React-Router Route
我正在嘗試更改 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;
您可以使用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);
看看這個樣本,可能會有所幫助
我認為您使用 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;
編輯:添加了帶有狀態的最終實現以供將來使用
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.