[英]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.