我如何将状态传递到我的react-router路径?

Question

如何将appState添加到我的反应路由器路径?

我有react-redux，但我不确定最有效的方式来传递props到我的react-router路径。我尝试使用withRouter，但一直出现问题。

我想要的只是把props从一个页面传递到另一个页面。

当前错误是appState未定义

//index.js
<Route path="/dash/:slug" buckets={appState.buckets} render={props => <Bucket {...props} />} />

状态来自于:

//GetUserBuckets.js
export default function GetUserBuckets()
{
const classes = useStyles();
const ListLoading = LoadingComponent(UserBuckets);
const [appState, setAppState] = useState({
loading: true,
posts: null,
});

useEffect(() =>
{
axiosInstance.get('all/buckets/').then((res) =>
{
const allBuckets = res.data;
setAppState({ loading: false, buckets: allBuckets });
console.log(res.data);
});
}, [setAppState]);
return (
<div className={classes.text}>
<h1>Buckets</h1>
<ListLoading isLoading={appState.loading} buckets={appState.buckets} />
<Container className={classes.createBucket}>
<CreateDialog />    
</Container>
</div>
);
};

Answer 1

你可以使用router state来传递state，下面是reactrouter dom docs中的一个例子https://reactrouter.com/web/api/location

// usually all you need
<Link to="/somewhere"/>
// but you can use a location instead
const location = {
pathname: '/somewhere',
state: { fromDashboard: true }
}
<Link to={location}/>
<Redirect to={location}/>
history.push(location)
history.replace(location)

Answer 2

如果你想通过Route prop传递它-你可以使用location prop (location.state)，下面的链接

https://reactrouter.com/web/api/location

但是一般来说，通过路由组件传递数据并不是最好的主意，因为如果用户通过链接到这个特定的组件-状态将不会附加到位置prop。

在你的情况下，Route应该在GetUserBuckets组件的render (return)方法