Question

我整夜都在研究所有其他具有相同问题的StackOverflow问题。我在所有可能的地方都没有使用过它。我唯一能够获得路由的方法是将导航栏放在switch语句上方。但是，这对我的应用程序不利，因为我在导航链接中使用了侧面抽屉。我的网址正在更改，但是没有任何显示。我正在使用React Router 4.3.1。这是整个网站的问题，如果我确实按Enter键或重新加载，则路由有效。这是我的设置。

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);

Answer 1

如果我不得不猜测正在发生的事情，我会说您的问题归结为在单个组件树中有两个Routers。您不需要同时使用BrowserRouter和HashRouter-如果没有第二个嵌套的HashRouter，则设置就可以了。您应该只拥有一个顶级路由器，然后可以嵌套路由，以使路径改变时某些特定位的复杂性可以交换出去。

withRouter主要用于如果您位于<Route />不能立即呈现的组件中，并且需要访问match和{{1}之类的路由器道具}。

您可以尝试删除history并看看是否能消除怪异吗？

即使使用withRouter

1 个答案: