React路由器仅模式路由
我在我的应用程序中有一个公共区域和一个私人区域，我希望能够在公共视图中的任何地方显示登录模式对话框。模式应该有自己的路线。第二个用例是私有区域中的配置文件模式。
问题是，当显示模式时，背景中的当前视图将消失，因为模式不是当前视图路由的子级。
由于我不想将相同的模式添加到每个可能的视图路由，这里有一个问题:是否有可能将模式路由与其父路由解耦，并在应用程序中到处显示它们，而无需主要内容呈现？解决这一问题的最佳方法是什么？我找到了this issue，但它似乎不是同样的问题。
浏览器刷新模式路由将不会在后台呈现任何内容，但这是一个我可以接受的问题。
回答 2
Stack Overflow用户
发布于 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。
Stack Overflow用户
发布于 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
复制相似问题