反应路由器没有重定向到确切的网址

Posted 2023-02-21

【中文标题】反应路由器没有重定向到确切的网址

【英文标题】：React router not redirect on the exact url

【发布时间】：2016-11-18 07:26:09

【问题描述】：

我正在构建一个使用 react-router 的 Web 应用程序。当我点击 url localhost:8080/user 它工作正常。当我点击 localhost:8080/user/login 时它不起作用并且控制台显示 unexpected tokken > 这是什么意思？我无法理解这个问题。

当我更改为任何其他类时，这行代码中还有一件事，然后它也不起作用。

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;

登录.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'，Routes js 工作正常，这意味着如果我使用丑陋的 url，即与 # 一起使用。如果我点击http://localhost:8080/#/user/login?_k=jtorvg 工作正常，那会是什么问题？

我使用节点服务器和快递包来服务每个请求。

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']
                
            
        ]
    
;

【问题讨论】：

你能显示Login.js组件吗？

这意味着您的登录组件中存在语法错误

如果我将登录组件更改为仪表板组件，那么它也无法正常工作。但我的仪表板组件工作正常

如何为您的应用程序提供服务？以及如何使用 webpack 构建你的包？似乎没有传递路由以从服务器做出反应。

我添加了一个截图。请检查一下

【参考方案1】：

是的。经过几个小时的努力，我得到了答案，这是一个很小的错误。在索引页面bundle.js 脚本路径必须更改为 url，如 localhost:8080/user/dashboard。

只需添加<script src="/bundle.js" /> 而不是<script src="bundle.js" />