Я провел всю ночь, разбираясь со всеми остальными вопросами StackOverflow, которые имеют такую же проблему. Я использовал без во всех местах, я мог бы использовать его. Единственный раз, когда я смогу заставить маршруты работать, это если я поместил панель навигации прямо над операторами switch. Однако это не очень хорошо для моего приложения, так как я использую боковой ящик для своих навигационных ссылок. Мой URL меняется, но ничего не отображается. Я использую React роутер 4.3.1. Это проблема всего моего сайта, и если я нажимаю клавишу ввода или перезагружаюсь, маршруты работают. Вот мои настройки.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createStore, compose, applyMiddleware, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import './styles/styles.scss'
import reducer from './store/reducers/auth';
import ticketReducer from './store/reducers/ticket'
import filterReducer from './store/reducers/filters'
import { BrowserRouter } from "react-router-dom"
import { HashRouter, Route, Switch, Link, NavLink } from 'react-router-dom';
import 'normalize.css/normalize.css';
import './styles/styles.scss';
import 'react-dates/lib/css/_datepicker.css';
import './styles/daterangepicker.css'
const composeEnhances = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(
combineReducers({
users: reducer,
tickets: ticketReducer,
filters: filterReducer
}), applyMiddleware(thunk)
)
const app = (
<Provider store={store}>
<BrowserRouter>
<Route component={App} />
</BrowserRouter>
</Provider>
)
ReactDOM.render(app, document.getElementById('src'));
Routes.js
import React from 'react';
import { HashRouter, Route, Switch, Link, NavLink } from 'react-router-dom';
import Home from './usercontainers/home'
import Signup from './usercomponents/Signup'
import NewUserCreated from './usercontainers/NewUserCreated';
import UpdateUser from './usercomponents/UpdateUser';
import createHistory from 'history/createBrowserHistory';
import UserUpdated from './usercontainers/UserUpdated'
import NavBar from './usercontainers/NavBar';
import Header from './usercontainers/Header'
import TicketList from './ticketcomponents/TicketList'
import CreateTicket from './ticketcomponents/CreateTicket'
import TicketDetail from './ticketcomponents/TicketDetail';
import CustomLayout from './usercontainers/Layout'
import LoginForm from './usercomponents/LoginForm';
import UserList from './usercomponents/UserList'
import MyTickets from './ticketcomponents/MyTickets';
import CreateDepartment from './usercomponents/CreateDepartment';
import DepartmentList from './usercomponents/DepartmentList'
import EditDepartment from '../src/usercomponents/UpdateDepartment'
import StartTicket from './ticketcomponents/StartTicket';
import SideNavBar from './containers/SideNavBar';
import { withRouter } from 'react-router-dom'
const history = createHistory();
const BaseRouter = () => (
<div>
<HashRouter history={history}>
<div>
<Header />
<Switch>
<Route exact path='/' component={Home} />
<Route exact path='/signup/' component={Signup} />
<Route exact path='/userlist/' component={UserList} />
<Route exact path='/newuser/' component={NewUserCreated} />
<Route exact path='/userupdated/' component={UserUpdated} />
<Route exact path='/ticketlist' component={TicketList} />
<Route exact path='/createticket' component={withRouter(StartTicket)} />
<Route exact path='/ticketdetailview/:id' component={TicketDetail} />
<Route exact path='/login' component={CreateTicket} />
<Route exact path='/mytickets/' component={MyTickets} />
<Route exact path='/createdepartment/' component={CreateDepartment} />
<Route exact path='/departmentlist/' component={DepartmentList} />
<Route exact path='/updatedepartment/:id' component={EditDepartment} />
<Route exact path='/updateuser/:id' render={(props) => (<UpdateUser />)} />
</Switch>
</div>
</HashRouter>
</div>
);
export default BaseRouter;
App.js
import React, { Component } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { connect } from 'react-redux';
import BaseRouter from './routes';
import * as actions from './store/actions/auth';
import Start from './usercontainers/Start'
import { BrowserRouter } from "react-router-dom"
import CustomLayout from './usercontainers/Layout';
import { withRouter } from 'react-router-dom'
import { HashRouter, Route, Switch, Link, NavLink } from 'react-router-dom';
class App extends Component {
componentDidMount() {
this.props.onTryAutoSignup();
console.log(this.props)
}
render() {
return (
<Start {...this.props}>
<BaseRouter />
</Start>
);
}
}
const mapStateToProps = state => {
return {
isAuthenticated: state.token !== null,
username: state.username,
user: state.user,
filters: state.filters
}
}
const mapDispatchToProps = dispatch => {
return {
onTryAutoSignup: () => dispatch(actions.authCheckState()),
getfetchUser: id => dispatch(actions.fetchUser(id))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App);