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