简体   繁体   English

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

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

I want to make a second private page like links in MeteorJS with react, called landing, create the Landing.js component and import it into the routes file but at the time of going to the route in the browser "http: // localhost: 3000/landing "sends me to the NotFound page, which may be wrong? 我想创建第二个私有页面,例如MeteorJS中带有链接的链接,称为“登陆”,创建Landing.js组件并将其导入到路由文件中,但是在浏览器中转到“ http://本地主机: 3000 / landing“将我发送到NotFound页面,这可能是错误的? I would be grateful for the help 我会很感激的

'../imports/routes/routes'; '../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>
      );
});

and my component Landing.js 和我的组件Landing.js

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

You have your Landing route after your wildcard "Not Found" route 通配符“未找到”路线之后,您拥有着陆路线

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

I'm pretty sure that if you switch these two over, it will work as expected :) 我很确定,如果将这两个都切换了,它将按预期工作:)

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM