带有react路由器v4的Meteor-重定向不工作

Question

我有两个文件：route.js和main.js。我在main.js文件中创建了一个跟踪器，在那里我不断检查loggedin状态。基于alanning：角色用户角色我需要将用户重定向到与管理员不同的界面。但似乎什么都没做。

main.js

import {Meteor} from 'meteor/meteor';
import {Tracker} from 'meteor/tracker';
import {onAuthenticationChange, routes} from '../imports/routes/routes';
import ReactDOM from 'react-dom';
Tracker.autorun(() => {
const authenticated = !!Meteor.userId();
let currentUserIsAdmin = false;
if(authenticated) {
const isAdmin = Roles.userIsInRole( Meteor.userId(), ['admin'], 'employees' );
if(isAdmin) {
currentUserIsAdmin = true;
} else {
currentUserIsAdmin = false;
}
}
onAuthenticationChange(authenticated, currentUserIsAdmin);
});
Meteor.startup(() => {
ReactDOM.render( routes, document.getElementById('customerPortalApp'));
});

router.js

import {Meteor} from 'meteor/meteor';
import {Route, BrowserRouter, Switch, Redirect} from 'react-router-dom';
import React from 'react';
...
const publicPages = [
'/',
'/login'
];
const adminPages = [
'/admin',
'/klant',
];
const customerPages = [
'/klant',
]

// check authentication for pages
export const onAuthenticationChange = (authenticated, currentUserIsAdmin) => {
console.log('is authenticated...', authenticated);
const path = this.location.pathname;
const isUnauthenticatedPage = publicPages.includes(path);
const isAuthenticatedPage = adminPages.includes(path);
if( authenticated ) {
if(currentUserIsAdmin) {
console.log('huidige gebruiker is admin...');
return <Redirect to="/admin"></Redirect>;
} else {
console.log('huidige gebruiker is normaal......');
return <Redirect to="/klant"></Redirect>; 
}
} else if (!authenticated && isAuthenticatedPage) {
console.log('No rights to view the page... routed to the path login page');
}
}
function RouteWithLayout({layout, component, ...rest}){
return (
<Route {...rest} render={(props) =>
React.createElement( layout, props, React.createElement(component, props))
}/>
);
}
export const routes = (
<BrowserRouter>
<Switch>
{/* onEnter={publicPage} */}
{/* default side */}
<RouteWithLayout layout={AuthenticationLayout} exact path="/" component={AuthLogin} />
<RouteWithLayout layout={AuthenticationLayout} exact path="/login" component={AuthLogin} />
{/* admin side */}
<RouteWithLayout layout={AdminLayout} path="/admin" exact component={AdminDashboard} />

{/* customer side */}
<RouteWithLayout layout={CustomerLayout} path="/klant" exact component={CustomerDashboard} />
<Route component={PageNotFound} />
</Switch>
</BrowserRouter>
);

我也试过使用this.props.history.push('/admin'(，但this.props.chistory在中不可用

使用解决方案更新：我首先将BrowserRouter更改为Router，它具有可用的历史属性：

import {Router, Route, Switch} from 'react-router-dom';

下一步是创建一个常量变量，它可以方便地访问历史：

const history = createBrowserHistory();

最后，我们可以使用return history.replace('/admin');导航到页面

Answer 1

查看这个react-router包并安装&导入此

import { Meteor } from 'meteor/meteor';
import React from 'react';
import { Router, Route, browserHistory } from 'react-router';

并像下面那样改变这条线CCD_ 3

const path = browserHistory.getCurrentLocation().pathname;

并在下方添加类似browserHistory.replace('/admin');

if(currentUserIsAdmin) {
console.log('huidige gebruiker is admin...');
//return <Redirect to="/admin"></Redirect>;
browserHistory.replace('/admin');
} else {
console.log('huidige gebruiker is normaal......');
//return <Redirect to="/klant"></Redirect>; 
browserHistory.replace('/klant');
}

编辑：

通过NPM:添加Passage

npm i @dollarshaveclub/react-passage@latest --save

Passage组件，用于识别应用程序中的路线。

然后像一样在<BrowserRouter>标签之前添加Passage标签

<Passage targets={[ RouteWithLayout ]}>
<BrowserRouter>
......
......
</BrowserRouter>
</Passage>

希望它能有所帮助。