blocks|key|1312150|text|如果您将导航组件放在开关的上方，它将解决您的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1312151|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>
);|code-block|syntax|javascript|1312152|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you place your Navigation component above the switch, it will solve your problem.

<pre><code>const Routes = () =&gt; (
 &lt;Router history={history} component={Home}&gt;
 &lt;Route component={Navigation}/&gt;
 &lt;Switch&gt;
 &lt;Route exact path="/" render={props =&gt; &lt;Home auth={auth} {...props} /&gt;} /&gt;
 &lt;Route path="/home" render={props =&gt; &lt;Home auth={auth} {...props} /&gt;} /&gt;
 &lt;Route
 path="/callback"
 render={props =&gt; {
 handleAuthentication(props);
 return &lt;Callback {...props} /&gt;;
 }}
 /&gt;
 &lt;Route component={NotFound} /&gt;
 &lt;/Switch&gt;
 &lt;/Router&gt;
);
</code></pre>

blocks|key|1312242|text|我同意Jyutzio的观点，即您需要将导航组件移动到子路由之上，以便仅更改子路由的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1312243|为了使用登录/注销状态更新导航栏，您可能需要考虑实现redux。我有一个项目与您的几乎完全相同的要求-导航头是静态的。|1312244|在我的标头中有import+{+connect+}+from+'react-redux';|offset|length|style|CODE|1312245|在组件底部，我在导出前使用connect：|1312246|function+mapStateToProps(state)+{
++return+{+authenticated:+state.auth.authenticated+};
}

Header+=+connect(mapStateToProps)(Header);

export+default+Header;|code-block|syntax|javascript|1312247|然后，这允许我检查“经过身份验证”的状态部分，并相应地呈现。|1312248|renderLogoutButton()+{
++if(this.props.authenticated)+{
++++return(
++++++<li><a+onClick={...}>Logout</a></li>
++++);
++}+else+{
++++return(
++++++<li><a+onClick={...}>Login</a></li>
++++);
++}
}|1312249|您将需要设置一个reducer，但有许多资源解释redux设置。|1312250|1312251|我设置的路由器(简化版)如下：|1312252|​|1312253|import+Admin+from+'./index';
...
<BrowserRouter>
++<Switch>
++++<Route+exact+path="/login"+component={Login}+/>
++++<Route+path="/"+component={Admin}+/>
++</Switch>
</BrowserRouter>|1312254|索引：|1312255|import+AdminRouter+from+'./admin/admin_router';
...
<div>
++<Menu+/>
++<div>
++++<AdminRouter+/>
++</div>
</div>|1312256|admin_router：|1312257|<div>
++<Switch>
++++<Route+exact+path="/"+component={Home}+/>
++++<Route+exact+path="/details"+component={AdminDetails}+/>
++++<Route+component={PageNotFound}+/>
++</Switch>
</div>|1312258|entityMap^0|0|0|7|12|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1E|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1F|8|@$F|1G|G|1H|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1I|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1J|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1K|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1L|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1M|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1O|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1P|8|@]|9|@]|A|$]]|$1|11|3|12|5|N|7|1Q|8|@]|9|@]|A|$O|P]]|$1|13|3|14|5|6|7|1R|8|@]|9|@]|A|$]]|$1|15|3|16|5|N|7|1S|8|@]|9|@]|A|$O|P]]|$1|17|3|18|5|6|7|1T|8|@]|9|@]|A|$]]|$1|19|3|1A|5|N|7|1U|8|@]|9|@]|A|$O|P]]|$1|1B|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|1C|$]]

I agree with Jyutzio in that you need to move the Navigation component above the child routes to only change to content of the child routes.

In order to have the Navigation bar update with logged in / logged out state you may want to consider implementing redux. I have a project with nearly the exact requirements as yours - a navigation header that is static.

In my header I have <code>import { connect } from 'react-redux';</code>

At the bottom of the component I use connect before exporting:

<pre><code>function mapStateToProps(state) {
 return { authenticated: state.auth.authenticated };
}

Header = connect(mapStateToProps)(Header);

export default Header;
</code></pre>

Then this allows me to check the "authenticated" piece of state and render accordingly.

<pre><code>renderLogoutButton() {
 if(this.props.authenticated) {
 return(
 &lt;li&gt;&lt;a onClick={...}&gt;Logout&lt;/a&gt;&lt;/li&gt;
 );
 } else {
 return(
 &lt;li&gt;&lt;a onClick={...}&gt;Login&lt;/a&gt;&lt;/li&gt;
 );
 }
}
</code></pre>

You will need to setup a reducer, but there are many resources explaining redux setup.
<hr/>
The router (simplified) I have set up as follows:

<pre><code>import Admin from './index';
...
&lt;BrowserRouter&gt;
 &lt;Switch&gt;
 &lt;Route exact path="/login" component={Login} /&gt;
 &lt;Route path="/" component={Admin} /&gt;
 &lt;/Switch&gt;
&lt;/BrowserRouter&gt;
</code></pre>

index: 

<pre><code>import AdminRouter from './admin/admin_router';
...
&lt;div&gt;
 &lt;Menu /&gt;
 &lt;div&gt;
 &lt;AdminRouter /&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

admin_router:

<pre><code>&lt;div&gt;
 &lt;Switch&gt;
 &lt;Route exact path="/" component={Home} /&gt;
 &lt;Route exact path="/details" component={AdminDetails} /&gt;
 &lt;Route component={PageNotFound} /&gt;
 &lt;/Switch&gt;
&lt;/div&gt;
</code></pre>

I have a problem with my react components.
Basically my interface should be an SPA, built with ReactJS.

During the implementation of the authentication with <a href="https://www.npmjs.com/package/auth0-js" rel="nofollow noreferrer">auth0-js</a> I also implemented some routes.
The layout looks like this:

<a href="https://i.stack.imgur.com/rX5et.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rX5et.jpg" alt="layout"></a>

Whenever I click now on the "Recipes" link, it should redirect to the route "/recipes".
However, when I implement the route with <code>&lt;Route path="/recipes" component={Recipes} /&gt;</code> it only renders what is actually returned in the Recipes component. I know that this is correct from what react does.
Now, I want to keep the navigation bar but only want to exchange the component below, so I want to change what is below the navigation bar like I did in <a href="https://github.com/thacomposers/thecookbook/blob/feature/login-reg-form/src/components/App.js" rel="nofollow noreferrer">App.js</a>.

How can I achieve this? Is something about the routes, or components not correct?
I do not want to re-render always everything. I also want to keep the style of the whole page. Is there a way to do this?

The whole code can be found <a href="https://github.com/thacomposers/thecookbook/tree/feature/login-reg-form/" rel="nofollow noreferrer">here</a>.

Keep navigation bar on route switch

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我的react组件有问题。基本上，我的界面应该是一个用ReactJS构建的SPA。在使用实现身份验证的过程中，我还实现了一些路由。布局如下所示：​​每当我点击"Recipes“链接时，它应该重定向到路由"/recipes”。但是，当我使用<Route path="/recipes" component={Recipes...

问将导航栏保留在路线开关上
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将导航栏保留在路线开关上EN