在呈现子组件时触发父组件的呈现

Question

我使用以下材料-ui主题Paperbase，并在Header.js组件内，我有以下useEffect钩子:

const [temperature, setTemperature] = useState([]);
const getTemperature= async () => {
try {
const response = await fetch('/get-temperature')
const tempData = await response.json();
setTemperature(tempData);
} catch (err) {
console.error(err.message);
}
};
useEffect(() => {
getTemperature();
}, []);  

这样做的主要目的是将当前温度显示为信息，在头组件中，在第一个页面加载/渲染时显示。

现在在下面的App.js中，我有以下return设置，其中上面的Header组件被调用。

return (
<Router>
<UserProvider myinfo={myinfo}>
<Switch>
<Route path="/">
<ThemeProvider theme={theme}>
<div className={classes.root}>
<CssBaseline />
<nav className={classes.drawer}>
<Hidden xsDown implementation="css">
<Navigator />
</Hidden>
</nav>
<div className={classes.app}>
<Header
onDrawerToggle={handleDrawerToggle}
/>
<main className={classes.main}>
<Switch>
<Route exact path="/new-user"
render={(props) => <Content key={props.location.key} />}
/>
<Route exact path="/view-results"
render={(props) => <ViewResults key={props.location.key} />}
/>
</Switch>
</main>
</div>
</div>
</ThemeProvider>
</Route>
</Switch>
</UserProvider>
</Router>
);

我的问题是，我怎么能触发Header(父)的渲染每当用户路由到/new-user或/view-results，这反过来调用Content.js或ViewResults.js，为了使useEffect在header .js刷新数据，从REST api获取并再次显示标题中的最新温度?

理想情况下，任何时候Content.js或ViewResults.js渲染，确保标题。jsgetTemperature()被调用。

任何帮助都将非常感激。

Answer 1

您当前的代码非常接近于多布局系统。作为Route的子组件，您可以通过useLocation()甚至本机window.location.pathname访问当前位置。

这是我的多布局React应用程序的例子。你可以尝试使用它来适应你的代码。

不指定path时，MainLayout使用回退路由。它还包含一个Header和一个页面

const Dispatcher = () => {
const history = useHistory();
history.push('/home');
return null;
};
const App = () => (
<BrowserRouter>
<Switch>
<Route
component={Dispatcher}
exact
path="/"
/>
<Route
exact
path="/login/:path?"
>
<LoginLayout>
<Switch>
<Route
component={LoginPage}
path="/login"
/>
</Switch>
</LoginLayout>
</Route>
<Route>
<MainLayout>
<Switch>
<Route
component={HomePage}
path="/home"
/>
</Switch>
</MainLayout>
</Route>
</Switch>
</BrowserRouter>
);

这是MainLayout

的代码

const MainLayout = ({ children }) => (
<Container
disableGutters
maxWidth={false}
>
<Header location={props.location} />
<Container
component="main"
maxWidth={false}
sx={styles.main}
>
{children}
</Container>
<Footer />
</Container>
);

现在Header可以是任何东西。您需要在此组件

中放置一个捕获

import { useLocation } from 'react-router-dom'
cont Header = (props) => {
const { pathname } = useLocation();

//alternatively you can access props.location

useEffect(() => {
if (pathname === '/new-user') {
getTemperature();
}
}, [pathname]);  
};

注意Header不是Route的直接后代，因此它不能通过props直接访问位置。你需要在链中转移

Route -> MainLayout -> Header

或者最好使用useLocation