将导航栏保留在路线开关上
将导航栏保留在路线开关上
提问于 2018-02-11 23:19:54
我的react组件有问题。基本上，我的界面应该是一个用ReactJS构建的SPA。
在使用auth0-js实现身份验证的过程中，我还实现了一些路由。布局如下所示：
每当我点击"Recipes“链接时，它应该重定向到路由"/recipes”。但是，当我使用<Route path="/recipes" component={Recipes} />实现路由时，它只呈现Recipes组件中实际返回的内容。我从react做的事情中知道这是正确的。现在，我想保留导航栏，但只想交换下面的组件，所以我想像在App.js中一样更改导航栏下面的内容。
我如何才能做到这一点？是路由或组件有问题吗？我不想总是重新渲染所有的东西。我也想保持整个页面的风格。有没有办法做到这一点？
整个代码可以在here上找到。
回答 2
Stack Overflow用户
发布于 2018-02-12 08:53:27
我同意Jyutzio的观点，即您需要将导航组件移动到子路由之上，以便仅更改子路由的内容。
为了使用登录/注销状态更新导航栏，您可能需要考虑实现redux。我有一个项目与您的几乎完全相同的要求-导航头是静态的。
在我的标头中有import { connect } from 'react-redux';
在组件底部，我在导出前使用connect：
function mapStateToProps(state) {
return { authenticated: state.auth.authenticated };
}
Header = connect(mapStateToProps)(Header);
export default Header;然后，这允许我检查“经过身份验证”的状态部分，并相应地呈现。
renderLogoutButton() {
if(this.props.authenticated) {
return(
<li><a onClick={...}>Logout</a></li>
);
} else {
return(
<li><a onClick={...}>Login</a></li>
);
}
}您将需要设置一个reducer，但有许多资源解释redux设置。
我设置的路由器(简化版)如下：
import Admin from './index';
...
<BrowserRouter>
<Switch>
<Route exact path="/login" component={Login} />
<Route path="/" component={Admin} />
</Switch>
</BrowserRouter>索引：
import AdminRouter from './admin/admin_router';
...
<div>
<Menu />
<div>
<AdminRouter />
</div>
</div>admin_router：
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/details" component={AdminDetails} />
<Route component={PageNotFound} />
</Switch>
</div>Stack Overflow用户
发布于 2018-02-12 00:50:01
如果您将导航组件放在开关的上方，它将解决您的问题。
const Routes = () => (
<Router history={history} component={Home}>
<Route component={Navigation}/>
<Switch>
<Route exact path="/" render={props => <Home auth={auth} {...props} />} />
<Route path="/home" render={props => <Home auth={auth} {...props} />} />
<Route
path="/callback"
render={props => {
handleAuthentication(props);
return <Callback {...props} />;
}}
/>
<Route component={NotFound} />
</Switch>
</Router>
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48733026
复制相关文章
相似问题
腾讯云开发者
