反应,仅路由器“ /”有效,其他路由获取“ Cannot GET ..”

时间:2018-06-27 10:48:10

标签: javascript reactjs react-router react-redux react-router-v4

我知道这里有多个类似的问题,但是没有一个合适的解决方案(对我没有一个作用)。

我只是停留在这一点上,找不到任何解决方案,需要帮助!

注释

  1. 不使用任何服务器(例如Node.js或其他任何服务器)
  2. 反应(版本-16.4.1)
  3. react-router-dom(版本-4.3.1)

上下文

index.js 文件(应用入口点)

// index.js
//----------------------------------------
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import {Provider} from 'react-redux';

import Store from './store';
import Home from '../components/home';

const App = () => (
    <Provider store={Store}>
        <Router>
            <Home/>
        </Router>
    </Provider>
)
ReactDOM.render(
    <App/>,
    document.getElementById('root')
);

home.js index.js(文件上方)中提到的唯一组件

// home.js
//----------------------------
import React, { Component } from 'react';
import {Switch, Route, Link} from 'react-router-dom';

import {connect} from 'react-redux';
import Signup from './signup';
import Login from './login';

class Home extends Component{
    render(){
        return(
            <Switch>
                <Route exact path='/' component={Signup}/>       // Case (1) 
                <Route exact path='/signup' component={Signup}/> // Case (2)
                <Route exact path='/login' component={Login}/>   // Case (3)
            </Switch>
        )
    }
}

export default connect(null, null)(Home)

signup.js 具有 <Link> 实现的简单视图

import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import {connect} from 'react-redux';

class Signup extends Component{
    render(){
        return(
            <div>
                 <Link to='/signup'>Link to Signup</Link>  // For Route Case (2) in signup.js 
            </div>
        )
    }
}
export default connect(null, null)(Signup)

问题

因此,当应用启动时:

  1. 应用程序运行并呈现- signup.js ,并带有链接-“链接到注册” (网址:localhost:8080
  2. 我通过浏览器(网址:"/"触发localhost:8080-工作正常!
  3. 我点击“链接到注册” (网址:localhost:8080/signup)-工作正常!
  4. 现在我重新加载(url:localhost:8080/signup)-错误! "Cannot GET /signup"
  5. 如果我通过浏览器触发"/signup"-错误! "Cannot GET /signup"
  6. 如果我通过浏览器触发"/login"-总是错误 "Cannot GET /login"

0 个答案:

没有答案