Реагируйте, работает только Router `/`, получая «Cannot GET ..» для других маршрутов - PullRequest
0 голосов
/ 27 июня 2018

Я знаю, что существует множество подобных вопросов, но нет подходящего решения ни для одного из них (ни один не работал для меня).

Я просто застрял в этой точке и не смог найти никакого решения, нужна помощь!

Примечания

  1. Не используется ни один сервер (например, Node.js или что-либо еще),
  2. React (версия - 16.4.1)
  3. response-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 со ссылкой - «Ссылка на регистрацию» (url: localhost:8080)
  2. Я запускаю "/" через браузер (URL: localhost:8080) - ЭТО РАБОТАЕТ!
  3. Я нажимаю "Ссылка для регистрации" (URL: localhost:8080/signup) - ЭТО РАБОТАЕТ!
  4. Теперь я перезагружаюсь (url: localhost:8080/signup) - ОШИБКА! "Cannot GET /signup"
  5. Если я запускаю "/signup" через браузер - ОШИБКА! "Cannot GET /signup"
  6. Если я запускаю "/login" через браузер - ВСЕГДА ОШИБКА "Cannot GET /login"
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...