我是编程的新手,如果我阅读官方文档,我会很难理解.
在这篇文章中,作者正在谈论<HashRouter>和<BrowserRouter>
这就是他提到的
HashRouter基本上它使用URL中的哈希来呈现组件.由于我正在构建一个静态的单页网站,我需要使用它.
BrowserRouter,它使用HTML5历史API来渲染组件.可以通过pushState和replaceState修改历史记录.更多信息可以在这里找到
现在,我没有得到两者的重要性和用例.就像他说可以通过pushState和replaceState修改历史记录时的意思一样,它使用URL中的哈希来呈现组件
虽然BrowserRouter的第一个解释对我来说完全模糊,但关于HashRouter的第二个解释也没有意义,比如为什么有人会在url中使用Hash(#)来渲染组件？
我有一个带有create-react-app的小型React应用程序,它在运行后从本地服务器运行良好npm start.好到目前为止.
但是,当我运行时npm run build,该过程似乎正确执行(创建构建文件夹,其中包含捆绑的js文件和index.html文件),但是当我在浏览器中打开index.html时它什么也没有呈现.我错过了什么？
旁白:我也尝试将其上传到远程服务器,当我转到URL时,浏览器又回来了......
禁止访问:您无权访问此服务器上的/.
...如果有人知道如何解决这个问题,我也会很感激.
我使用react-router-dom并构建了我的反应应用程序。当我在服务器上部署它时，我得到一个空白页面并且控制台是空的。
我的 App.js 是：
import React, { Component } from 'react';
import { Route, Switch, BrowserRouter} from 'react-router-dom';
import Agenda from './components/Agenda/Agenda';
import Planning from './components/Planning/Planning';
class App extends Component {
render() {
return (
<div>
<BrowserRouter basename="/">
<Switch>
<Route exact path="/" component={Agenda} />
<Route path="/planning" component={Planning} />
</Switch>
</BrowserRouter>
</div>
);
}
}
export default App;
我的 index.js 是：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App/>
, document.getElementById('root'));
我的 index.html …
我试图按照此文档与Google登录集成,但我在控制台中遇到此错误:
Uncaught TypeError: Cannot read property 'load' of undefined
at script.js:1
script.js:
window.gapi.load('auth2', function() {
console.log('Loaded!');
});
我在大约一半时间内收到错误,并检查Chrome中的网络面板,只有在未加载以下资源时才会发生错误:
https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.d2dliHDvPwE.O/m=auth2/exm=signin2/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNGAKhVlpzmTUpjFgzBXLpLM_oEFg/cb=gapi.loaded_1
如何消除此错误？
如果它有用,这是我的index.html:
<!DOCTYPE html>
<html>
<head>
<title>Google Sign In Test</title>
<meta name="google-signin-client_id" content="*****.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="script.js" async defer></script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</body>
</html>