使用 React 和 React-Router 在 Meteor 中路由答案

【问题标题】：Routing in Meteor with React & React-Router使用 React 和 React-Router 在 Meteor 中路由
【发布时间】：2018-03-06 19:50:48
【问题描述】：

我想在 MeteorJS 中创建第二个私有页面，例如带有 react 的链接，称为landing，创建 Landing.js 组件并将其导入到路由文件中，但在浏览器中转到路由时“http：/ /localhost: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>
    );
  };
}

【问题讨论】：

render() { ... } 之后的 ; 只是一个错字还是真的在你的代码中？
是的，我所有的组件都以分号结尾。
您的其他路线有效吗？这个有什么不同？ /registro 有效吗？
但是你描述的是class，它的方法后面不应该有;。
是的，我所有的路线都可以，除了Landing，不知道为什么不行

标签： javascript reactjs meteor routes react-router

【解决方案1】：

在通配符“未找到”路线之后有着陆路线

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

我很确定，如果你切换这两个，它会按预期工作:)

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

【讨论】：