javascript - 在'react-router-dom'中传递Route的组件道具上的变量
问题描述
我正在使用 reactjs,如何在 Home 组件上发送 props,它仅作为 Route in 的组件参数的值调用react-router-dom
,我有一个名为 sample 的变量,我想在 home 组件类中调用它的值,比如const sample = this.props.sample
在这种情况下我该怎么做?
import React, { Component } from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import ReactDOM from 'react-dom';
import Login from './components/Login';
import Home from './components/Home';
const sample = 'send this to home component';
class App extends Component {
render() {
return (
<Router history={history}>
<Switch>
<div>
<Route exact path="/" component={Login} />
<Route path="/login" component={Login} />
<Route path="/home" component={Home} />
</div>
</Switch>
</Router>
);
}
}
export default App;
解决方案
您可以创建一个新组件,将 react-router-doms 路由和您自己的一些逻辑结合起来。
import React from "react"
import { Route, Redirect } from "react-router-dom"
const CustomRoute = ({ component: Component, sample, ...rest}) => {
return(
<Route
{...rest}
//route has a render prop that lets you create a component in-line with the route
render = {props =>
sample === true ? (
<Component {...props} />
) : (
<Redirect to="/login"/>
)
}
/>
)
}
export default CustomRoute
然后导入您的 CustomRoute 组件并用它替换您的 Home Route。
<CustomRoute path="/home" component={Home} sample={sample}/>
推荐阅读
- apache - 我的 Apache conf 是否在永无止境的循环中,我该如何改进?
- laravel - Laravel Eloquent:如何使用 Pivot 获得第三个表关系
- assembly - MASM - 进入权限级别 0
- c - 下面的程序可以工作,但会出现一个对话框,提示 filename.exe 已停止工作。为什么这样?
- javascript - 反应式表单正确地将表单值转换为模型对象作为列表
- python - 熊猫:“替换”不适用于单元格值“5-6”
- reactjs - 从“外部”访问功能组件的方法
- jooq - Can jOOQ object mapping configured ensure all fields of POJO are set?
- testing - 在自定义 CMake 目标中依赖目标失败后继续
- java - 如何在 Rabbit 中设置 x-dead-letter-exchange?