BrowserRouter不会通过历史组件内部渲染

Question

的阵营路由器的版本是4 这里是BrowserRouter我的代码中使用：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {Meteor} from 'meteor/meteor'; 
import {BrowserRouter, Route, Redirect, Switch} from 'react-router-dom'; 
import browserHistory from 'history'; 
import {Tracker} from 'meteor/tracker'; 

import Signup from '../imports/ui/Signup'; 
import MyLink from '../imports/ui/MyLink'; 
import NotFound from '../imports/ui/NotFound'; 
import Login from '../imports/ui/Login'; 

const history = browserHistory.createBrowserHistory(); 

const unathenticatedPages = ['/', '/signup']; 
const athenticatedPages = ['/mylink']; 
const isLoggedIn =() => { 
    return Meteor.userId() !== null; 
}; 

const routes = (
    <BrowserRouter> 
    <Switch > 
     <Route exact path="/" render={() => (isLoggedIn() ? <Redirect to="/mylink"/> : <Login/>)} /> 
     <Route path="/signup" render={() => (isLoggedIn() ? <Redirect to="/mylink"/> : <Signup/>)} /> 
     <Route path="/login" render={() => (isLoggedIn() ? <Redirect to="/mylink"/> : <Login/>)} /> 
     <Route path="/mylink" render={() => (!isLoggedIn() ? <Login/> : <MyLink history={history}/>)} /> 
     <Route path="*" component={NotFound} /> 
    </Switch> 
    </BrowserRouter> 
); 

Tracker.autorun(() => { 
    const isAuthenticated = !!Meteor.userId(); 
    console.log("isAuthenticated: ", isAuthenticated); 

    const pathname = history.location.pathname; 
    console.log("pathname: ", pathname); 

    const isUnathenticatedPage = unathenticatedPages.includes(pathname); 
    const isAthenticatedPage = athenticatedPages.includes(pathname); 

    if (isLoggedIn() && isUnathenticatedPage) { 
    history.replace('/mylink'); 
    } else if (!isLoggedIn() && isAthenticatedPage) { 
    history.replace('/'); 
    } 
}); 

Meteor.startup(() => { 
    ReactDOM.render(routes, document.getElementById('app')); 
}); 

我与这个有问题的是，BrowserRouter的history不在上述render()之内时传递给呈现的组件。 this.props.history.replace('/notfound');在MyLink组件内不起作用。传递给MyLink组件的history实例似乎不像BrowserRouter创建的那样。 但是在NotFound内，一个this.props.history.replace('/...');将按预期工作。

会是什么解决方案？

Answer 1

我认为解决方案是使用历史记录对象从功能PARAMS通过render()

<Route path="/mylink" render={({history}) => (!isLoggedIn() 
    ? <Login/> 
    : <MyLink history={history}/>)} 
/>