路由不适用于 React 路由器 v4

Posted 2023-02-22

【中文标题】路由不适用于 React 路由器 v4

【英文标题】：Routes are not working with React router v4

【发布时间】：2018-12-31 14:48:42

【问题描述】：

我已经升级到 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;

【参考方案1】：

您是否尝试在您的路线名称前加一个“/”，例如：

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