簡體   English   中英

使用React和React-Router在Meteor中進行路由

[英]Routing in Meteor with React & React-Router

我想創建第二個私有頁面,例如MeteorJS中帶有鏈接的鏈接,稱為“登陸”,創建Landing.js組件並將其導入到路由文件中,但是在瀏覽器中轉到“ http://本地主機: 3000 / landing“將我發送到NotFound頁面,這可能是錯誤的? 我會很感激的

'../imports/routes/routes';

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

import Vitae from '../ui/Vitae';
import Logeo from '../ui/Logeo';
import Registro from '../ui/Registro';
import NoEncontrado from '../ui/NoEncontrado';
import Landing from '../ui/Landing';
  // flecha tracker
  Tracker.autorun(() => {
    const paginasUnautenticadas = ['/', '/registro'];
    const paginasAutenticadas = ['/vitae', '/landing'];
    const enPaginaPublica = () => {
      if(Meteor.userId()) {
        browserHistory.replace('/vitae');
      } 
    };
    const enPaginaPrivada = () => {
      if(!Meteor.userId()) {
        browserHistory.replace('/');
      }
    };
    export const cambioAutenticacion = (estaAutenticado) => {
        const pathname = browserHistory.getCurrentLocation().pathname;
        const esPaginaUnautenticada = paginasUnautenticadas.includes(pathname);
        const esPaginaAutenticada = paginasAutenticadas.includes(pathname);
        if(esPaginaUnautenticada && estaAutenticado) {
            browserHistory.replace('/vitae');
        } else if (esPaginaAutenticada && !estaAutenticado) {
            browserHistory.replace('/');
        }
    };
    export const routes = (
        <Router history={browserHistory}> 
          <Route path="/" component={Logeo}/>
          <Route path="/vitae" component={Vitae}/>
          <Route path="/registro" component={Registro}/>
          <Route path="*" component={NoEncontrado}/>
          <Route path="/landing" component={Landing}/>
        </Router>
      );
});

和我的組件Landing.js

import React from 'react';
export default class Landing extends React.Component {
  render() {
    return(
      <div>
      <h3>Landing Page</h3>
      </div>
    );
  };
}

通配符“未找到”路線之后,您擁有着陸路線

      <Route path="*" component={NoEncontrado}/>
      <Route path="/landing" component={Landing}/>

我很確定,如果將這兩個都切換了,它將按預期工作:)

      <Route path="/landing" component={Landing}/>
      <Route path="*" component={NoEncontrado}/>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM