我正在构建一个使用react-router的Web应用程序。当我点击 url localhost:8080/user 时,它工作正常。当我点击 localhost:8080/user/login 时,它不起作用,控制台显示 意外的 token > 这意味着什么?我无法理解这个问题。
当我更改为任何其他类时,这行代码中还有一件事,它也不起作用。
路由.js
import React from 'react';
import UserBase from './UserBase.js';
import Dashboard from './Dashboard.js';
import Login from './Login.js';
// var ReactRouter = require('react-router');
// var Router = ReactRouter.Router;
// var Route = ReactRouter.Route;
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'
var Routes = (
<Router history={browserHistory}>
<Route path="/" component={Login}/>
<Route path="user" component={UserBase}>
<IndexRoute component={Dashboard} />
<Route path="login" component={Login}/>
</Route>
</Router>
);
module.exports = Routes;
登录.js
import React from 'react';
class Login extends React.Component{
constructor(){
super();
}
render(){
return (
<div className="login">
<a className="hiddenanchor" id="signup"></a>
<a className="hiddenanchor" id="signin"></a>
<div className="login_wrapper">
<div className="animate form login_form">
<section className="login_content">
<form>
<h1>Login Form</h1>
</form>
</section>
</div>
<div id="register" className="animate form registration_form">
<section className="login_content">
<form>
<h1>Create Account</h1>
</form>
</section>
</div>
</div>
</div>
);
}
}
export default Login;
如果我删除 'history={browserHistory}',则路由 js 工作正常,这意味着如果我使用丑陋的 url,即与 # 一起使用。如果我点击http://localhost:8080/#/user/login?_k=jtorvg工作正常那么会出现什么问题?
我使用节点服务器和 express 包来服务每个请求。
var app = express();
app.use('/', express.static(path.join(__dirname, 'public')));
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname + '/public/index.html'));
});
webpack.config.js
module.exports = {
entry: "./app/components/EntryPoint.js",
output: {
filename:"public/bundle.js"
},
module : {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}
]
}
};
最佳答案
是的。经过几个小时的努力,我得到了答案,这是一个非常小的错误。在索引页bundle.js
必须更改 url 的脚本路径,如 localhost:8080/user/dashboard。
只需添加 <script src="/bundle.js" />
而不是<script src="bundle.js" />
关于url - React 路由器未重定向到确切的 url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38390110/