如何在React中使用URL重定向到不同的组件

Question

我是新手。我想重定向到一个不同的组件以及一些参数。截至目前，我正在使用从应用程序组件中呈现一个钩子组件

App.tsx

<Hook region={this.state.region} loginUser={this.state.user.username}/>

但现在我有了一个主页.tsx，其中我有一个材料ui组件CardActionArea，我想让整个卡组件都可以点击&单击Card组件后，导航到包含"/userinfo"url路径和道具数据的Hook组件(但参数应该在url中可见(。

所以在App.tsx中，我有

<HomePage />

在主页.tsx中，

<Card className={classes.root}>
<CardActionArea>
<CardContent>
UserInfo
</CardContent>
</CardActionArea>
</Card>

现在如何在HomePage.tsx中点击url="/userinfo"和数据区域的卡片组件后调用Hook组件；用户名。(注意：这些数据(地区、用户名(不应在Url路径中可见(

Answer 1

基于Url的重定向与React Router库配合使用(运行npm install react-router-dom进行安装(。这应该有效：

应用程序

function App() {
// Wrap your HomePage inside a router to access history context
return (
<Router>
<Route path="/" component={HomePage}/>
</Router>
);
}

主页.tsx

import {withRouter} from 'react-router-dom';

function HomePage(props) {
const goTo: Function = (url: string) => {
props.history.push(url);
};
return (
<div>
<Card className={classes.root} onClick={() => goTo("/userInfo")}>
<CardActionArea>
<CardContent>
UserInfo
</CardContent>
</CardActionArea>
</Card>
<Router>
<Route 
path="/userInfo" 
render={props => <Hook {...props} foo="bar"/>}
/>
</Router>
</div>
);
}
// instead of export default HomePage;
export default withRouter(HomePage);

一些解释：

路由器组件基本上会遍历每个子路由。每次当前URL与路径道具匹配时，它都会呈现给定的组件。之后，一些路由上下文将自动传递给子组件。这允许给定的子组件更改URL，并在需要时重新呈现路由。

主页被封装在路由器中，因此它可以操作URL并更新呈现。由于您没有指定任何历史上下文，所有路由器都将使用相同的默认路由器。现在假设您的用户位于根URL"/"上。HomePage是呈现和可见的，Card组件也是，但Hook不是。

onClick方法将触发goTo本地函数，该函数基本上将向浏览器历史记录中推送一个新条目(这将更新URL并刷新渲染(。现在"/"one_answers"/userInfo"都匹配当前URL(当当前URL以路径给定的URL开头时，就会发生匹配(。

如果要传递隐藏的道具，并且父组件可以访问该道具，则使用render道具而不是component。这允许您将一个功能组件传递给Route，您可以向其自由添加和/或删除道具。

因此，在本例中，我只是将foo道具添加到Hook中，但您可以在这里做任何您想做的事情。

编辑

如果你不想让你的主页和钩子同时渲染，那么要么将主页路径设置为不同的路径(比如"/home"(，要么添加确切的道具，比如：

应用程序

function App() {
// Wrap your HomePage inside a router to access history context
return (
<Router>
<Route path="/" exact component={HomePage}/>
</Router>
);
}

这将强制一个完全匹配，也就是说，如果URL不是完全"/"，它将不会呈现

Answer 2

App.tsx:

<Router>
<Route exact path="/"  component={HomePage} />
<Route path="/userinfo"  render={props => <Hook {...this.props}  region={this.state.region} loginUser={this.state.user.username}/>} />
</Router>

主页.tsx

<Link   to="/userinfo">
<Card className={classes.root} >
<CardActionArea>
<CardContent>
UserInfo
</CardContent>
</CardActionArea>
</Card>
</Link>