我在我的应用程序中有一个公共区域和一个私人区域,我希望能够在公共视图中的任何地方显示登录模式对话框。模式应该有自己的路线。第二个用例是私有区域中的配置文件模式。
问题是,当显示模式时,背景中的当前视图将消失,因为模式不是当前视图路由的子级。
由于我不想将相同的模式添加到每个可能的视图路由,这里有一个问题:是否有可能将模式路由与其父路由解耦,并在应用程序中到处显示它们,而无需主要内容呈现?解决这一问题的最佳方法是什么?我找到了this issue,但它似乎不是同样的问题。
浏览器刷新模式路由将不会在后台呈现任何内容,但这是一个我可以接受的问题。
发布于 2015-10-04 13:06:54
我认为你最好的选择可能是使用隐藏的state
,或者查询字符串(用于固定链接),或者两者兼而有之,特别是如果一个模式(例如登录模式)可以显示在任何页面上。如果您不知道,React Router会公开历史API的state
部分,允许您将数据存储在用户的历史记录中,而这些数据实际上在URL中不可见。
这里有一组我想要的路线;如果你愿意,你可以跳过straight into the 。你还可以查看生成的示例应用程序in its own window,这样你就可以看到URL的变化(它使用散列位置策略来与JSBin兼容),并确保刷新如你所预期的那样工作。
const router = (
<Router>
<Route component={LoginRedirect}>
<Route component={LocationDisplay}>
<Route path="/" component={ModalCheck}>
<Route path="/login" component={makeComponent("login")} />
<Route path="/one" component={makeComponent("one")} />
<Route path="/two" component={makeComponent("two")} />
<Route path="/users" component={makeComponent("users")}>
<Route path=":userId" component={UserProfileComponent} />
</Route>
</Route>
</Route>
</Route>
</Router>
);
让我们研究一下这些路由及其组件。
首先,makeComponent
只是一个方法,它接受一个字符串并创建一个React组件,该组件将该字符串呈现为头部,然后呈现其所有子对象;这只是一种快速创建组件的方法。
LoginRedirect
是一个只有一个用途的组件:检查路径是否为/login
,或者当前路径上是否有?login
查询字符串。如果这两项中的任何一个为真,则和当前状态不包含login
密钥,则将状态上的login
密钥设置为true
。如果任何子路由匹配(即始终呈现组件),则使用该路由。
class LoginRedirect extends React.Component {
componentWillMount() {
this.handleLoginRedirect(this.props);
}
componentWillReceiveProps(nextProps) {
this.handleLoginRedirect(nextProps);
}
handleLoginRedirect(props) {
const { location } = props;
const state = location.state || {};
const onLoginRoute = location.query.login || location.pathname === "/login";
const needsStateChange = onLoginRoute && !state.login;
if (needsStateChange) {
// we hit a URL with ?login in it
// replace state with the same URL but login modal state
props.history.setState({login: true});
}
}
render() {
return React.Children.only(this.props.children);
}
}
如果您不想使用查询字符串来显示登录模式,当然可以修改此组件以满足您的需要。
接下来是LocationDisplay
,但它只是我为JSBin演示构建的一个组件,它显示有关当前路径、状态和查询的信息,还显示一组演示应用程序功能的链接。
登录状态对于下一个组件ModalCheck
.很重要该组件负责检查login
(或profile
,或任何其他)键的当前状态,并在适当的时候显示相关的模式。( JSBin演示实现了一个超级简单的模式,你的肯定会更好。:)它还在主页上以文本形式显示模态检查的状态。)
class ModalCheck extends React.Component {
render() {
const location = this.props.location;
const state = location.state || {};
const showingLoginModal = state.login === true;
const showingProfileMoal = state.profile === true;
const loginModal = showingLoginModal && <Modal location={location} stateKey="login"><LoginModal /></Modal>;
const profileModal = showingProfileMoal && <Modal location={location} stateKey="profile"><ProfileModal /></Modal>;
return (
<div style={containerStyle}>
<strong>Modal state:</strong>
<ul>
<li>Login modal: {showingLoginModal ? "Yes" : "No"}</li>
<li>Profile modal: {showingProfileMoal ? "Yes" : "No"}</li>
</ul>
{loginModal}
{profileModal}
{this.props.children}
</div>
)
}
}
其他一切都是相当标准的React Router东西。唯一需要注意的是LocationDisplay
中的Link
,它展示了如何链接到应用程序中的各个地方,在某些情况下显示情态。
首先,您当然可以通过在查询字符串中使用login
键来链接(和固定链接)到任何页面,要求它显示登录模式:
<Link to="/one" query={{login: 1}}>/one?login</Link>
<Link to="/two" query={{login: 1}}>/two?login</Link>
当然,您也可以直接链接到/login
URL。
接下来,请注意,您可以显式设置状态,以便模式显示,而这不会更改URL。然而,它将保留在历史中,因此可以像您预期的那样使用back/forward,并且刷新将在相同背景页面的顶部显示模式。
<Link to="/one" state={{login: true}}>/one with login state</Link>
<Link to="/two" state={{login: true}}>/two with login state</Link>
您还可以链接到当前页面,添加特定的模式。
const path = props.location.pathname;
<Link to={path} state={{login: true}}>current path + login state</Link>
<Link to={path} state={{profile: true}}>current path + profile state</Link>
当然,根据您希望应用程序如何工作,并不是所有这些都适用或有用。例如,除非一个模式是真正的全局的(也就是说,无论路由如何,它都可以被显示为),这可能会很好地工作,但是对于像显示给定用户的配置文件这样的模式,我可能会将其设置为一个单独的路由,将其嵌套在父级中,例如:
<Route path="/users/:id" component={UserPage}>
<Route path="/users/:id/profile" component={UserProfile} />
</Route>
在本例中,UserProfile
将是一个呈现模式的组件。
您可能想要进行更改的另一个示例是在历史记录中存储某些模态;如果您不想这样做,可以适当地使用replaceState
而不是setState
。
发布于 2016-01-16 11:17:27
用shouldComponentUpdate做这个会很简单的
<Router history={newHistory}>
<Route path="/" component={App}>
<Route path="home" component={Container} >
<IndexRedirect to="home"/>
<Route path="login" component={Authentication}/>
<Route path="home" component={Home}/>
<Route path="post/:id" component={Post}/>
</Route>
</Route>
</Router>
<Link to='/post/123' state={{isModal:true}}/>
<Link to='/home' state={{isModal:false}}/>
<Link to='/login' state={{isModal:true}}/>
Container = React.createClass({
render() {
let isModal = (location.state && location.state.modal);
return (
<div id="MeContainer">
<ModalControlOpen isModal={isModal}>
<Modal returnTo={this.props.location.pathname}>
{this.props.children}
</Modal>
</ModalControlOpen>
<ModalControlClose isModal={isModal}>
{this.props.children}
</ModalControlClose>
</div>
)
}
});
ModalControlOpen = React.createClass({
render(){
if (this.props.isModal) {
return (
this.props.children
)
} else return <div></div>
}
});
ModalControlClose = React.createClass({
shouldComponentUpdate(nextProp){
return !nextProp.isModal
},
render(){
return (
this.props.children
)
}
});
https://stackoverflow.com/questions/28795085
复制相似问题