Question

我正在构建一个使用react-router的Web应用程序。当我点击网址 localhost：8080 / user 时，它运行正常。当我点击 localhost：8080 / user / login 时，它不起作用，控制台显示意外的tokken＆gt; 这意味着什么？我无法理解这个问题。

当我更改为任何其他类时，在这行代码中还有一件事情，那就是它不能正常工作。

Routes.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;

Login.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']
                }
            }
        ]
    }
};

Answer 1

是。经过几个小时的挣扎，我得到了答案。在索引页面bundle.js必须更改url的脚本路径，如localhost：8080 / user / dashboard。

只需添加<script src="/bundle.js" />代替<script src="bundle.js" />

React路由器不会重定向到确切的URL

1 个答案: