BrowserRouter nicht Geschichte Komponente passieren innerhalb machen

Question

Der Router Version React ist 4. Hier ist die Verwendung von BrowserRouter in meinem Code:

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

Das Problem, das ich dies mit bin, ist, dass BrowserRouter ‚s history wird nicht an die gerenderten Komponenten übergeben, wenn diese innerhalb einer render() wie oben sind. this.props.history.replace('/notfound'); funktioniert nicht innerhalb der MyLink Komponente. Die history Instanz, die an die Komponente MyLink übergeben wird, scheint nicht die gleiche zu sein wie die, die BrowserRouter erzeugt. Jedoch innerhalb der NotFound eine this.props.history.replace('/...'); würde wie erwartet funktionieren.

Was wäre die Lösung?

Answer 1

ich glaube, die Lösung Objekt aus Funktion nutzen Geschichte ist params von render()

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