リダイレクトルータv4リダイレクトが失敗する

Question

onEnterをrenderに置き換えました。ルータのv4仕様に合わせてコードを変更しました。ポイントはログインしたときに/signupページが表示されないようにすることでした。自分のコードで何が間違っていますか？

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 onEnterPublicPage =() => { 
    if (Meteor.userId()) { 
    return <Redirect to="/mylink/" />; 
    } 
}; 

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

Tracker.autorun(() => { 
    const isAuthenticated = !!Meteor.userId();  
    const pathname = history.location.pathname; 

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

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

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

Answer 1

リアクタールータ4では、そのようなBrowserhistoryを使用しなくなりました。代わりに、in the documentationのように、BrowserRouterに含まれています。

また、これで問題が解決するかどうかはわかりませんが、私はAppコンポーネントを作成してルーティングを行っています。その後、v4を使用すると、履歴はpropsになります。その後、ロジックを実行してprops.history.push(url)を実行できます。

編集は：ここで私はこの作業を取得するために使用しているコードです：

import React from 'react'; 
import Header from './Header'; 
import BinsList from './bins/BinsList'; 
import BinsMain from './bins/BinsMain'; 
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; 

const App = (props) => { 
    return (
    <Router> 
     <div> 
     <Header /> 
     <Switch> 
      <Route exact path="/" component={BinsList}></Route> 
      <Route path="/bins/:binId" component={BinsMain}></Route> 
     </Switch> 
     </div> 
    </Router> 
); 
} 

export default App; 

をそして、私のヘッダーは次のようにレンダリングされます：

import React, { Component } from 'react'; 
import Accounts from './Accounts'; 
import { Link, Redirect, withRouter } from 'react-router-dom' 


class Header extends Component { 
    onBinClick(e){ 
    e.preventDefault(); 
    Meteor.call('bins.insert', (err, bin) => { 
     const url = `/bins/${bin}`; 
     this.props.history.push(url); 
    }); 
    } 

    render() { 
    return (
     <nav className="nav navbar-default"> 
     <div className="navbar-header"> 
      <Link to="/" className="navbar-brand">MarkBin</Link> 
     </div> 
     <ul className="nav navbar-nav"> 
      <li> 
      <Accounts /> 
      </li> 
      <li> 
      <a href="#" onClick={this.onBinClick.bind(this)}>Create Bin</a> 
      </li> 
     </ul> 
     </nav> 
    ); 
    } 
} 

export default withRouter(Header); 

Answer 2

はほとんど変化して機能するようになりました。

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

MyLink.js成分：

import React from 'react'; 
import {Accounts} from 'meteor/accounts-base'; 
import {withRouter} from 'react-router-dom'; 

class MyLink extends React.Component {  
    navigate(evt) { 
    evt.preventDefault(); 
    this.props.history.push('/notfound'); 
    } 

    onLogout() { 
    Accounts.logout(); 
    } 

    render() { 
    return (
     <div> 
     <p>MyLink</p> 
     <button onClick={this.navigate.bind(this)}>Go to Not Found page</button> 
     <br/> 
     <button onClick={this.onLogout.bind(this)}>Log out</button> 
     </div> 
    ); 
    } 
} 

export default withRouter(MyLink);