Я занимаюсь разработкой приложения, в котором проверяю, не является ли пользователь

. Как я могу добиться этого, так как не могу изменить состояния внутри функции рендеринга? , loggedIn, я должен отобразить форму входа, иначе dispatch и action Вот что я придумал (Не проверено в бою):

    render() {
         if (isLoggedIn) {
             // dispatch an action to change the route
         }
         // return login component
         <Login />
    }

Если вы используете

, учитывая, что вы используете react-router v4

Добавьте класс, а затем удалите, если вы хотите снова включить прокрутку, протестировано в IE, FF, Safari и Chrome. withRouter и использовать history.push. Чтобы не получить сообщение об ошибке, вы можете проверить наличие в цикле предотвратителя: withRouter только тогда, когда ваш компонент не получает Router реквизиты, это может произойти в случаях, когда ваш компонент является вложенным дочерним элементом компонента, представленного маршрутизатором, и вы не передали реквизиты маршрутизатора в или когда компонент вообще не связан с маршрутизатором и отображается как отдельный компонент от маршрутов.

import {withRouter} from 'react-router';

class App extends React.Component {
     ...
     componenDidMount() {
        // get isLoggedIn from localStorage or API call
        if (isLoggedIn) {
             // dispatch an action to change the route
             this.props.history.push('/home');
        }
     }
     render() {
         // return login component
         return <Login />
    }
}


export default withRouter(App);

Важное замечание { *} Если у меня есть ссылка на объект: & # xA ; & # xA ; var test = {} ; & # xD ; & # xA ;, которые потенциально (но не сразу) будут иметь вложенные объекты, что-то вроде: & # xA ; & # xA ; {level1: {level2: {level3: & quot {*** } level3 & {Quot ***}}}} ; & # XD ; & # хА ; Как лучше всего, чтобы метод

. Например, при использовании Redux: withRouter, чтобы предотвратить блокировку обновлений shouldComponentUpdate, важно, чтобы withRouter, обертывающих компонент, который реализует shouldComponentUpdate // Это обходит

, или вы можете использовать Redirect shouldComponentUpdate

withRouter(connect(...)(MyComponent))

сценарий

connect(...)(withRouter(MyComponent))

, вы можете использовать

import {withRouter} from 'react-router';

class App extends React.Component {
     ...
     render() {
         if(isLoggedIn) {
              return <Redirect to="/home"/>
         }
         // return login component
         return <Login />
    }
}

2 — это число цифр, до которого мы хотим округлить это число. react-router v2 or react-router v3 для динамического изменения маршрута, как context, или использовать

class App extends React.Component {
     ...
     render() {
         if (isLoggedIn) {
             // dispatch an action to change the route
             this.context.router.push('/home');
         }
         // return login component
         return <Login />
    }
}

App.contextTypes = {
    router: React.PropTypes.object.isRequired
}
export default App;

В response-router version 4:

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

Другая альтернатива — это обрабатывать с помощью асинхронных действий в стиле Thunk (которые безопасны / могут иметь побочные эффекты).

import React from 'react'
import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom'

const Example = () => (

  if (isLoggedIn) {
    <OtherComponent />

  } else {

    <Router>
      <Redirect push to="/login" />
      <Route path="/login" component={Login}/>
    </Router>

  }
)

const Login = () => (
    <h1>Form Components</h1>
    ...
)

export default Example;

Если вы используете Thunk, вы можете внедрить один и тот же объект

как в ваш компонент history, так и в действия Thunk, используя <Router>. Тогда у создателей ваших действий будет thunk.withExtraArgument, Например:

import React from 'react'
import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom'
import { createBrowserHistory } from "history"
import { applyMiddleware, createStore } from "redux"
import thunk from "redux-thunk"

const history = createBrowserHistory()

const middlewares = applyMiddleware(thunk.withExtraArgument({history}))
const store = createStore(appReducer, middlewares)

render(
  <Provider store={store}
    <Router history={history}>
      <Route path="*" component={CatchAll} />
    </Router
  </Provider>,
appDiv)

. Вы по-прежнему можете использовать Redux и history Итак, вот часть выполнения:

// meanwhile... in action-creators.js
export const notLoggedIn = () => {
  return (dispatch, getState, {history}) => {
    history.push(`/login`)
  }
}

. Еще одним преимуществом этого является то, что теперь URL легче обрабатывать, поэтому мы можем поместить информацию о перенаправлении в строку запроса и т. д.

. Вы можете попробовать выполнить эту проверку в ваших методах рендеринга, но если это вызывает проблемы, вы можете рассмотреть возможность сделать это в {* } check отлично работает для литералов, потому что componentDidMount (прочитайте его для всех деталей), но скорректирован, поскольку ваш объект не является вложенным.

Те, кто сталкивается с проблемами при реализации этого на mapDispatchToProps Затем, всякий раз, когда вы добавляете какой-то динамически добавленный элемент, снова вызывайте этот метод:

render(){ 

    return (
        <div>  
            { this.props.redirect ? <Redirect to="/" /> :'' } 
            <div>
                add here component codes
            </div>
        </div>
    );
} 

реагирующий маршрутизатор v4 https://github.com/ReactTraining/react-router/issues/3498 # issuecomment-301057248 { *}, который помогает выполнять навигацию даже из редукторов / действий, если вы хотите. Он хорошо документирован и прост в настройке . Вот рабочее решение для навигации по приложению реагирования программно.

history.js

import createHistory from 'history/createBrowserHistory'

export default createHistory()

App.js ИЛИ Route.jsx. Передайте историю как опору вашему маршрутизатору.

import { Router, Route } from 'react-router-dom'
import history from './history'
...
<Router history={history}>
 <Route path="/test" component={Test}/>
</Router>

. Вы можете использоватьpush() для навигации.

import history from './history' 

...

render() {
     if (isLoggedIn) {
         history.push('/test') // this should change the url and re-render Test component
     }
     // return login component
     <Login />
}

В одной строке javascript: Это мой дескриптор

Я бы посоветовал вам использовать connected-реакции-router на Google PrivateRoute позволяет вводить

, если пользователь вошел в систему и сохраняет токен в loggedIn Глядя на вывод react-router v4

и вот как я настроил метод onClick для маршрутизации на следующую страницу, но он не работает: path Мой полный класс: localStorge

    function PrivateRoute({ component: Component, ...rest }) {
     return (
        <Route
          {...rest}
          render={props => (localStorage.token) ? <Component {...props} /> : (
            <Redirect
              to={{
                pathname: '/signin',
                state: { from: props.location },
              }}
            />
          )
          }
        />
      );
    }

: возвращает итератор, где каждый

export default (
  <main>
    <Switch>
      <Route exact path="/signin" component={SignIn} />
      <Route exact path="/signup" component={SignUp} />
      <PrivateRoute path="/" component={Home} />
    </Switch>
  </main>
);

, несколько абзацев под большой таблицей в начале этого раздела), где говорится:

в этих браузерах:

от себя!

<RaisedButton label="Sign In"
           style={style}
           labelColor="#fff"
           onClick={this.navigateToHome}
           backgroundColor="#20B2AA" /> 

Этот вопрос уже задавался ранее и уже имеет ответ. Если эти ответы не полностью отвечают на ваш вопрос, пожалуйста,

 navigateToHome = () => {
    <Router>
      <Route  path={"/HomePage"} component={HomeActivity}/>
    </Router>
  };

задайте новый вопрос

import React from 'react';
import './App.css';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {Card,CardHeader,CardText} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import {Router,Route} from 'react-router'
import {HomeActivity} from './HomeActivity'

const style = {
  margin: 12,
};
export class LoginCardView extends React.Component{


  navigateToHome = () => {
    <Router>
      <Route  path={"/HomePage"} component={HomeActivity}/>
    </Router>
  };

  render()
  {
  return(
    <center>
        <MuiThemeProvider>
    <Card  className="CardLogin" >

  <CardText>
    <div >
     <h4 className="TextLoginCenter"> Sign In</h4>

      <tr>
        <td> <TextField
      hintText="Enter Username"
    /></td>
      </tr>
      <tr>
        <td> <TextField
      hintText="Enter Password"
       type="password"
    /> </td>
      </tr>

      <tr>
        <td>  <RaisedButton label="Sign In"
           style={style}
           labelColor="#fff"
           onClick={this.navigateToHome}
           backgroundColor="#20B2AA" />  </td>
      </tr>

    </div>
      </CardText>

    </Card>
  </MuiThemeProvider>
</center>
         );
  }
}

. Вы должны использовать Что означает «javascript: void (0)»? — Переполнение стека Глядя на вывод

много раз, но я не знаю, что именно это означает. Оператор withRouter() и this.props.router.push() Глядя на вывод

import {Router,Route,withRouter} from 'react-router';


class LoginCardView extends React.Component{
  constructor(props){
    //...
    this.navigateToHome = this.navigateToHome.bind(this);
    //...
    //...
  }
  ...
  navigateToHome(){
    this.props.router.push("/HomePage");
  };
  //...
  //...
  //...
export default withRouter(LoginCardView)
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector