Question

在此先感谢您的帮助。

我正在开发一个Web应用程序，该应用程序使用Reactjs和material-UI来显示多个农场的能源使用数据。

我希望单击主页上的按钮，然后将我带到另一个页面，以便单个服务器场查看其数据。

以下是代码，该代码使用NavLink组件重定向页面：

{/*Farm B*/}
        <GridItem xs={12} sm={6} md={3}>
          <Card>
            <CardHeader
              color="danger"
              stats
              icon
              sensorValue="43.27"
              cardName="Farm B"
            >
              <CardIcon color="primary">
                <SvgIcon
                  component={BarnIcon}
                  viewBox="0 0 980.000000 980.000000"
                />
              </CardIcon>
            </CardHeader>
            <CardFooter stats>
              **<NavLink to="/admin/dashboard" activeClassName="selected">**
                GO
              </NavLink>
            </CardFooter>
          </Card>
        </GridItem>

从此处开始，当它到达请求的页面时（例如，对于服务器场B），我如何将字符串作为变量发送到第二页，这样我就可以简单地指定每个服务器场的X个单独页面而不是X个一个变量-例如'A'或'B'等，它会在同一页面上加载动态数据。

谢谢。

Answer 1

您可以做类似的事情

<Navlink 
    to={{
       pathname: '/admin/dashboard/'
       someString: 'hello world'
    }}
>Go</Navlink>

通过props.location.someString

访问

Answer 2

您可以通过简单地定义并将动态的路径变量传递到/admin/dashboard URL来完成此操作也就是说，您需要做

<NavLink to=`/admin/dashboard/stringtopass` activeClassName="selected">

与此同时，您还需要修改侦听该URL的路由，以接受格式为

的路径变量

 <Route path='/admin/dashboard/:pathvairable' exact component={Dashboard} />

如果您要使用发送的变量的仪表板组件是使用钩子编写的，则只需要做 let { pathvairable } = useParams();假设您的导入中有行import { useParams } from 'react-router-dom'

但是，如果要处理普通的经典组件，则需要使用 this.props.match.params.pathvairable

您将能够阅读更多NavLink

Answer 3

您可以使用它来达到最佳效果。

//First Create Route Path
<Route path="/items/:itemId" component={Items} / >

// your link creation

const newTo = { 
  pathname: "/admin/dashboard", 
  String: 'hello bro' 
};
      <CardFooter stats>
          <NavLink to={newTo} activeClassName="selected">
            GO
          </NavLink>
        </CardFooter>

// In your CardFooter Component, you can access the data like this

this.props.match.params.itemId // this is items id 
this.props.location.String// this is Par1

使用实质性用户界面在Reactjs中传递数据

3 个答案: