javascript - 路由不适用于 React router v4

Question

我已经升级到 react-router v4、React v16、react-router-redux v5.0.0-alpha.9。在浏览了互联网上的教程之后，我终于配置了我的路由、Redux 存储和历史记录，如下所示，但路由不起作用。如果我点击登录/注册或其他链接，它总是将我带到 NotFound 组件。

我对这些最新版本很陌生。

Routes.js

import React from 'react';
import {default as history} from './history';

import { Switch, Redirect, IndexRedirect, IndexRoute, BrowserRouter as Router, Route, Link } from 'react-router-dom';
import {Provider} from 'react-redux';
import store from './store'
import {Map, toJS} from 'immutable';
import TransparentIndexPage from './Navigation/Components/TransparentIndexPage'
// Import miscellaneous routes and other requirements
import App from './App';
import NotFound from './Layout/Components/NotFound';
// Import static pages
import Home from './Layout/Components/Home';
import Contact from './Contact/Components/Contact';
import Settings from './Navigation/Components/Settings';
import CreatePage from './CreatePage/Components/CreatePage';
import {getCurrentUser, extractRoleInfo} from './Login/utils'
import Careers from './About/Components/Careers';
import Team from './About/Components/Team';
import Press from './About/Components/Press';
import Policy from './About/Components/Policy';
// import About from './About/Components/About';
// Import authentication related pages
import Login from './Login/Components/Login';
import ProfileView from './MyProfile/Components/ProfileView';
import Confirmation from './Email/Components/Confirmation';
import About from './About/Components/About';
import Register from './Register/Components/Register';
// import Facebook from './Facebook/Components/FacebookLogin';
import Logout from './Logout/Components/Logout';
import Profile from './Profile/Components/Profile';
// import UserDropdown from './Layout/Components/UserDropdown';
import ForgotPassword from './ForgotPassword/Components/ForgotPassword';
import ResetPassword from './ResetPassword/Components/ResetPassword';
import {syncHistoryWithStore} from 'react-router-redux'
// Import dashboard pages
import Dashboard from './Dashboard/Components/Dashboard';
import Search from './Search/Components/Search';
import Post from './Post/Components/Post';
import * as loginActions from './Login/actions';
import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux'

// const history = createHistory();

// const history = syncHistoryWithStore(browserHistory, store, {
//     selectLocationState: state => state.get('Routes').toJS()
// })
    // console.log("History: ", JSON.stringify(history));
function redirectIfAuth(nextState, replace) {
    const user = getCurrentUser(store.getState())
    if (user.get('id')) {
        replace({
            pathname: 'dashboard',
            state: { nextPathname: nextState.location.pathname}
        })
    }
}
var update = 0

function checkRoles(nextState, replace) {
        const user = getCurrentUser(store.getState())
        console.log("Role extract user: ", JSON.stringify(extractRoleInfo(user.get('role'))))
        if (!extractRoleInfo(user.get('role'))) {
            var url = window.location.href
            var refURL = ''
            let x = window.location.href.split('/')
            for(let v=5; v<x.length; v++)
            {
                refURL += x[v]
            }
            if(refURL)
            {
                if(update == 0)
                {
                    update = 1
                    store.dispatch(loginActions.setURL(refURL))
                }
            }
            replace({
                pathname: '/login',
                state: { nextPathname: nextState.location.pathname }
            })
        }
}
const routes = (
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <div>
                <Route exact path="/" component={App} />
                <Switch>
                    <Route path="login" component={Login} onEnter={redirectIfAuth}/>
                    <Route path="contact" component={Contact} />
                    <Route path="home" component={Home} />
                    <Route path="about" component={About} />
                    <Route path="careers" component={Careers} />
                    <Route path="press" component={Press} />
                    <Route path="policy" component={Policy} />
                    <Route path="team" component={Team} />
                    <Route path="home" component={Home} />
                    <Route path="register" component={Register} /> 
                    <Route path="about" component={About} />               
                    <Route path="forgotpassword" component={ForgotPassword}  onEnter={redirectIfAuth}/>
                    <Route path="resetpassword/:resetToken" component={ResetPassword}/>
                    <Route path="confirmation/:token" component={Confirmation} />
                    <Route path="dashboard" name='Dashboard' component={Dashboard} onEnter={checkRoles}/>
                    <Route path="/:id/myProfile" name='ProfileView' component={ProfileView} onEnter={checkRoles}/>
                    <Route path="create-page" name='ProfileView' component={CreatePage} onEnter={checkRoles}/>
                    <Route path="/:id/profile" name='Profile' component={Profile} onEnter={checkRoles}/>
                    <Route path=":loginId" name="NT" component={TransparentIndexPage} onEnter={checkRoles}>
                        <Switch>
                            <Route path="post" name='Post' component={Post} />
                            <Route path="search" component={Search} />
                            <Route path="settings" component={Settings} />
                        </Switch>
                    </Route>         
                    <Route path="*" component={NotFound}/>
                </Switch>
            </div>
        </ConnectedRouter>
    </Provider>
)
export default routes

history.js

import createBrowserHistory from 'history/createBrowserHistory';
import createMemoryHistory from 'history/createMemoryHistory';

export default process.env.BROWSER ? createBrowserHistory() : createMemoryHistory();

store.js

/*eslint no-unused-vars: ["error", { "argsIgnorePattern": "^_" }]*/

import {Map} from 'immutable';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';
import browserStorage from './browserStorage';
import { routerReducer, routerMiddleware, push } from 'react-router-redux';
import {default as history} from './history';

const middlewareHistory = routerMiddleware(history);
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

//sessionmiddleware is not required as we are using jsonwebtoken
const sessionMiddleware = _store => next => action => {
  let result = next(action)

  switch(action.type) {
    case 'LOGIN_SUCCESS':
      browserStorage.set({
        realUser: {
          loginId: action.user.id,
          token: action.token
        },
        currentUser: {
          loginId: action.user.id,
          token: action.token
        }
      })
      break;
    case 'USER_LOGOUT_SUCCESS':
      localStorage.clear()
      break;
    default:
      break;
  }

  return result
}

const store = createStore(
  reducer,
  Map(),
  composeEnhancers(
    applyMiddleware(
      sessionMiddleware,
      middlewareHistory, 
      thunk
    ),
    window && window.devToolsExtension ? window.devToolsExtension() : f => f
  )
);

export default store;

Answer 1

你有没有试过在你的路线名称前加上一个“/”，比如:

<Route path="/contact" component={Contact} />