React 应用程序被重定向到未指定的路由
React application is redirected to unspecified route
我是前端开发新手,正在尝试学习ReactJS。在我的示例应用程序之一中,我使用 "live-server public" 命令在我的本地主机上启动应用程序以用于开发目的。
package.json 内容
{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"author": "Phani Kumar",
"license": "MIT",
"dependencies": {
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1"
}
}
我的应用程序正在使用 babel 编译并使用 live-server 自动启动。
"use strict";
var app = {
title: 'Indecision App',
subtitle: 'put your life in the hands of a computer',
options: ['one','two']
};
function showOptions(){
if (app.options.length > 0){
return <p>Here are your options</p>
}else {
return <p>No Options</p>
}
}
var template = (
<div>
<h1>{app.title}</h1>
{app.subtitle && <p>{app.subtitle}</p>}
{showOptions()}
<ol>
<li>Item one</li>
<li>Item two</li>
</ol>
</div>
);
var user = {
name: 'phani',
age: 30,
location: 'Bangalore'
};
var userName = 'PhaniKumar Yadavilli';
var age = 30;
var location = "Bangalore";
function getLocation(location){
if (location){
return <p>Location: {location}</p>;
}else {
return undefined;
}
}
var templateTwo = (
<div>
<h1>{user.name ? user.name : 'Anonymous'}</h1>
{(user.age && user.age >= 18) && <p>Age: {user.age}</p>}
{getLocation(user.location)}
</div>
);
var appRoot = document.getElementById('app');
ReactDOM.render(templateTwo, appRoot);
当我点击 URL 127.0.0.1:8080 时,应用程序被重定向到 127.0.0.1:8080/Bangalore.我试过调试,但我无法理解这种重定向的原因。
index.html内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Indecision App</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
<script src="/scripts/app.js"></script>
</body>
</html>
语句 var location = 'Bangalore';
触发重定向,因为 location
是 JavaScript 中代表浏览器 URL 的保留字。将变量重命名为不同的名称
编辑:要正确重定向一个人会这样做:window.location = 'somewhere to go to'
。
var location = ''
更像是"bug"
我是前端开发新手,正在尝试学习ReactJS。在我的示例应用程序之一中,我使用 "live-server public" 命令在我的本地主机上启动应用程序以用于开发目的。
package.json 内容
{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"author": "Phani Kumar",
"license": "MIT",
"dependencies": {
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1"
}
}
我的应用程序正在使用 babel 编译并使用 live-server 自动启动。
"use strict";
var app = {
title: 'Indecision App',
subtitle: 'put your life in the hands of a computer',
options: ['one','two']
};
function showOptions(){
if (app.options.length > 0){
return <p>Here are your options</p>
}else {
return <p>No Options</p>
}
}
var template = (
<div>
<h1>{app.title}</h1>
{app.subtitle && <p>{app.subtitle}</p>}
{showOptions()}
<ol>
<li>Item one</li>
<li>Item two</li>
</ol>
</div>
);
var user = {
name: 'phani',
age: 30,
location: 'Bangalore'
};
var userName = 'PhaniKumar Yadavilli';
var age = 30;
var location = "Bangalore";
function getLocation(location){
if (location){
return <p>Location: {location}</p>;
}else {
return undefined;
}
}
var templateTwo = (
<div>
<h1>{user.name ? user.name : 'Anonymous'}</h1>
{(user.age && user.age >= 18) && <p>Age: {user.age}</p>}
{getLocation(user.location)}
</div>
);
var appRoot = document.getElementById('app');
ReactDOM.render(templateTwo, appRoot);
当我点击 URL 127.0.0.1:8080 时,应用程序被重定向到 127.0.0.1:8080/Bangalore.我试过调试,但我无法理解这种重定向的原因。
index.html内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Indecision App</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
<script src="/scripts/app.js"></script>
</body>
</html>
语句 var location = 'Bangalore';
触发重定向,因为 location
是 JavaScript 中代表浏览器 URL 的保留字。将变量重命名为不同的名称
编辑:要正确重定向一个人会这样做:window.location = 'somewhere to go to'
。
var location = ''
更像是"bug"