Как реализовать маршрутизацию от и до корня (index.js) в соответствии с избыточным

Question

Я программирую веб-страницу реагирующего сервера, пытаюсь перенаправить из index.js (то есть: localhost: 3000) на страницу входа в систему: (localhost: 3000 / login) и из входа в индекс (в случае неудачного входа в систему),Что мне нужно написать в index.js и login.js?

Это для приложения, основанного на реакции, использующего также редукционный фреймворк.Я пробовал несколько способов, в том числе настройку BrowserRouter и т. Д. На самом деле все не будет выполнять перенаправление.

Мой текущий код такой:

в index.js:

class Index extends Component {
    static getInitialProps({store, isServer, pathname, query}) {
    }

    render() {
        console.log(this.props);
        //const hist = createMemoryHistory();
        if (!this.props.isLoggedIn){
            return(<Switch><Route exact path = "/login"/></Switch>)
        }
                else{...}

в файле login.js:

render() {
        console.log(this.props);
        if (fire.auth().currentUser != null) {
            var db = fire.firestore();
            db.collection("users").doc(fire.auth().currentUser.uid).get().then((doc) => {
                this.props.dispatch({ type: 'LOGIN', user: doc.data() });
            })
        }
        const { isLoggedIn } = this.props
        console.log(isLoggedIn)

        if (isLoggedIn) return <Redirect to='/' />

Я, за исключением root, перенаправляем на вход в систему, если сеанс не включен, и вход в систему для перенаправления в root после успешного входа в систему.В настоящее время я получаю «Вы не должны использовать вне » в индексе (я пытался обернуть с помощью BrowserRouter, ServerRouter, Router. Первый говорит, что ему нужна история DOM. Добавление истории не меняет ошибку. Два другихне ошибка, но в браузере отображается пустое.) и "ReferenceError: Redirect не определен" при входе в систему.

Любая помощь приветствуется.

Answer 1

Вы можете использовать HOC ( Компоненты высшего порядка ) как то так

export default ChildComponent => {
    class ComposedComponent extends Component {

        componentWillMount() {
            this.shouldNavigateAway();
        }
        componentWillUpdate() {
            this.shouldNavigateAway();
        }
        shouldNavigateAway() {
            if (!this.props.authenticated) {
                this.props.history.push('/')
            }
        }

        render() {
            return <ChildComponent {...this.props} />
        }
    }
}

Answer 2

На данный момент вы пытаетесь вернуть объявление маршрута, заключенное в компонент Switch.Если вы хотите перенаправить пользователя на страницу / login, если он не вошел в систему, вам необходимо объявить маршрут выше в иерархии компонентов, и тогда вы сможете вернуть компонент <Redirect />.В любом случае, я бы посоветовал вам ознакомиться с документацией о реагирующих маршрутизаторах, чтобы узнать, как они выполняют аутентификацию.

https://reacttraining.com/react-router/web/example/auth-workflow