如果要问一百万次,我正在学习做出反应,请原谅我,但我已经浏览过,并且没有解决方案可以解决我的问题。除了解决问题外,我还想了解引擎盖下的机制是如何工作的...
我有2个简单的组件NavBar
和Home
。两者下面的代码。
NavBar
:
import React from "react";
class NavBar extends React.Component {
render () {
return (
<nav className="navbar sticky-top navbar-light" style={NavBarStyle}>
<a className="navbar-brand" href="/">
<img src={require('./av_tiny.png')} style={ImageStyle} alt="Logo"></img>
</a>
</nav>
)
}
}
const NavBarStyle = {
// some styling
}
const ImageStyle = {
width: '100px',
height: '50px',
marginLeft: '20px'
}
export default NavBar;
Home
:
import React from "react";
class Home extends React.Component {
render(){
return(
<h1>Home</h1>
);
}
}
export default Home;
当我在路线之间导航时,整个DOM重新呈现。我不希望NavBar
重新呈现。我的路线在App.js
中进行了声明,如下所示,我尝试将<NavBar />
移到<Router>
标记之外,反之亦然。我还尝试过将<NavBar />
放在自己的<div>
标签中。该应用程序的行为仍然相同,每当我更改URL时,它都会重新呈现所有内容。如何避免这种情况,我应该读什么以正确理解其原理?
import React from 'react';
import {BrowserRouter as Router, Route} from "react-router-dom";
//individual components
import Home from "./Home";
import SignInPage from "./Components/Login";
import NavBar from "./Components/Layout/NavBar"
//Routing to components
class App extends React.Component {
render() {
return(
<div>
<NavBar/>
<Router>
<Route exact path="/" component={Home}/>
<Route exact path="/login" component={SignInPage}/>
</Router>
</div>
)
}
}
export default App;
编辑:
我想我应该提到,通过在浏览器中手动更改URL进行导航时会重新渲染。我的/login
路由上有一些代码,成功登录后可以执行this.props.history.push('/');
,并且DOM不会重新呈现。仅{SignInPage}
被卸载而{Home}
被卸载。手动在页面之间导航时会出现相同的行为,还是我遗漏了某些东西?
答案 0 :(得分:0)
之所以重新渲染洞域,是因为路由器正在更改根属性。
看看嵌套路由器,它将使您了解如何实现目标Nested routes with react router v4 / v5
答案 1 :(得分:0)
您正在使用<a>
元素创建链接。这些会导致浏览器导航到新的URL而不会触发JavaScript,JavaScript会导致使用React动态更新内容。
使用您正在使用的任何React Router库中的<Link>
component。
进一步阅读: