首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >React单页应用程序

React单页应用程序
EN

Stack Overflow用户
提问于 2020-02-14 09:23:43
回答 2查看 56关注 0票数 0

我正在构建react的单页应用程序,但它仍然作为多页重新加载。Mya,我知道两者在结构上有什么不同?

代码语言:javascript
运行
复制
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();
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-02-14 13:40:04

您必须使用来自路由器的链接。您可能使用过锚标记,这导致了这个问题

票数 0
EN

Stack Overflow用户

发布于 2020-02-14 09:29:01

您的应用程序是React单页面应用程序。

多页面应用程序意味着当您访问每个路径( /work/,/projects/)时,它将加载一个新页面进行呈现。

React-Router允许您将这些路由声明为组件,而不必在导航到新页面时重新加载整个应用程序。

您可能还没有重构导航栏来使用React Router。

代码语言:javascript
运行
复制
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>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60218769

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档