Почему этот маршрутизатор реакции не маршрутизируется правильно? - PullRequest
0 голосов
/ 18 октября 2018

Я использовал эту же настройку в других приложениях реакции, которые я сделал, и на всю жизнь я не могу понять, почему это больше не работает.Я заметил, что это более поздняя версия реакции-маршрутизатора, но она не должна иметь серьезных изменений по сравнению с тем, что я прочитал

Когда я пытаюсь перейти на маршрут / твиты, я получаю сообщение об ошибке

TypeError: Cannot set property 'props' of undefined

Если я иду на маршрут / твиты2, он переходит к маршруту 404 NotFound.

Кажется, что все не аутентифицированные маршруты работают должным образом.

Любая помощь очень ценится.

import React from 'react';
import { BrowserRouter, Route, Switch} from 'react-router-dom'
import { Redirect } from 'react-router';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Login from './views/login/LoginPage.js';
import Logout from './views/logout/LogoutPage';
import TweetList from './views/tweets/tweetList';
import NotFound from './views/notfound/NotFoundPage';
import './App.css';


function loggedIn() {
  console.log("loggedIn() was called")
  let token = localStorage.getItem('token');
  let timestamp = localStorage.getItem('timestamp');
  let potentialExp = timestamp/1000 + 7200; // 2 hours after token was created in seconds
  /*Checks if there's a token in local storage and if the timestamp is older than 2 hours.
    These are simply quick front end checks. All auth is really done server side.
  */
  if( token != null && timestamp != null && potentialExp > new Date().getTime()/1000){
    console.log("the user met logged in condition")
    return true;
   }else{
    console.log(" the user did NOT meet logged in condition")
    return false
   }
}
const theme = createMuiTheme({
  palette: {
    primary: {
      light: '#8551fd',
      main: '#814ff8',
      dark: '#051550',
      contrastText: '#fff',
    },
    secondary: {
      light: '#f2f7fe',
      main: '#B0BEC5',
      dark: '#B0BEC5',
      contrastText: '#fff',
    },
  }
});

const PrimaryLayout = () => (
  <div className="primary-layout">
  <main>
  <Switch>
  <Route path="/" exact component={Login} />

  <Route path="/tweets" exact render={(passedProps) => (
    !loggedIn() ? (
      <Redirect to={`/login`}/>
    ) : (
      <TweetList {...this.props = passedProps}/>
    )
  )}/>

  <Route path="/tweets2" exact render={(props) => (
    !loggedIn() ? (
      <Redirect to={`/login`}/>
    ) : (
      <TweetList {...props}/>
    )
  )}/>

  <Route path="/logout" exact component={Logout} />
  <Route exact component={NotFound} />
</Switch>
  </main>
  </div>
)

const App = () => (
  <BrowserRouter>
  <MuiThemeProvider theme={theme}>
  <PrimaryLayout />
  </MuiThemeProvider>
  </BrowserRouter>
)

export default App;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...