我正在构建react的单页应用程序,但它仍然作为多页重新加载。Mya,我知道两者在结构上有什么不同?
function App() {
return (
<Router>
<div >
<NavbarPage />
<Route path='/' exact component={HomePage} />
<Route path='/about' component={AboutPage} />
<Route path='/work' component={WorkPage} />
<Route path='/projects' component={Projects} />
<Route path='/contact' component={ContactPage} />
<Route path='/login' component={LoginPage} />
</div>
</Router>
);
}
//index component
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import './styles/styles.scss';
import 'normalize.css/normalize.css';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<BrowserRouter >
<App />
</BrowserRouter>,
document.getElementById('root'));
serviceWorker.unregister();
发布于 2020-02-14 13:40:04
您必须使用来自路由器的链接。您可能使用过锚标记,这导致了这个问题
发布于 2020-02-14 09:29:01
您的应用程序是React单页面应用程序。
多页面应用程序意味着当您访问每个路径( /work/,/projects/)时,它将加载一个新页面进行呈现。
React-Router允许您将这些路由声明为组件,而不必在导航到新页面时重新加载整个应用程序。
您可能还没有重构导航栏来使用React Router。
HTML Navigation Bar with href links:
<a href="/work/">Work</a>
<a href="/about/">About</a>
React Router Navigational Bar:
<NavLink exact to="/work">Work</NavLink>
<NavLink exact to="/about">About</NavLink>
https://stackoverflow.com/questions/60218769
复制相似问题