Блог

Из приведенного ниже кода, если я удалю переменную routes из code1 и перейду к коду code2, я не столкнусь с какой-либо проблемой. но если я прокомментирую переменную code2 routes и буду работать с code1, я столкнусь с проблемой, что, когда я нажимаю на кнопку отправки Auth.js file или /auth маршрут (без или с выборомлюбой ингредиент из маршрута / burgerBuilder . когда пользователь нажимает на кнопку отправки Auth.js file .он отправит действие аутентификации в хранилище redux, чем отправит authStart, чем после получения ответа от firebase, чем мы отправим authSuccess, который изменяет токен и некоторые другие данные в redux. тогда эти изменения будут перенаправлять все компоненты, у которых есть состояние объекта аутентификации в их mapStateToProps. но токен не обновляется в mapStateToProps в Auth.js файл
, где я ошибаюсь .

полный код вы можете проверить по ссылке ниже [1]: https://codesandbox.io/s/goofy-kowalevski-mos8f?fontsize=14amp;hidenavigation=1amp;theme=dark

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

 

    class App extends Component {
      
      render(){

      //console.log("App.js");
      
//code1::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::


      let routes ;

      routes = (
        <Switch>      
          <Route path="/auth"    component={Auth}/>
          <Route path="/" exact component={BurgerBuilder} />
        </Switch>);
      
        if(this.props.token)
        {
          routes = (
            <Switch>      
              <Route path="/checkout"    component={Checkout} />
              <Route path="/orders" component={Orders} />
              <Route path="/logout" component={Logout} />
              <Route path="/" exact component={BurgerBuilder} />
            </Switch>);
        }

        
//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

//code2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
        routes = (
          <Switch>      
            <Route path="/auth"    component={Auth}/>
            <Route path="/checkout"    component={Checkout} />
              <Route path="/orders" component={Orders} />
              <Route path="/logout" component={Logout} />
            <Route path="/" exact component={BurgerBuilder} />
          </Switch>);
        //::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

        return (
          <div>
            <Layout>
              {routes}
            </Layout>
          </div>
        );
      }

      componentDidMount() {
        this.props.onAuthCheck();
      }
      
    }

    const mapStateToProps = (state)=>{
      return {
        token:state.auth.token
      }
    }


    const mapDispatchToProps = (dispatch) => {
      return{
        onAuthCheck:() =>dispatch(authCheckState()) //when try to auto signin
      }
    }

    export default withRouter(connect(mapStateToProps,mapDispatchToProps)(App));
 Run code snippetHide resultsExpand snippet


 

то, что я уже пробовал -> я последовал за вопросом о stackoverflow, в котором говорилось, что это из-за не обновленных react и react-dom .я застрял в нем с 12 часов.
заранее спасибо.

я уже упоминал об этом, когда у меня возникла рассматриваемая проблема.когда пользователь отправлял форму, это вызывало повторный рендеринг из-за того, что я получил токен с сервера, используя действие аутентификации. и я подготовил свои маршруты таким образом, чтобы он не содержал auth.js маршрут страницы файла (входа / регистрации). так что теперь это (auth.js ) не отображается, потому что я пропустил маршрут auth.js файл (страница входа / регистрации). и даже я вошел в систему и успешно получил токен, но все еще был на том же URL, потому что код перенаправления, который я написал внутри auth.js файл не выполняется.

еще немного информации и приведите больше ясности.—>

я знаю, что компонент Link или NavLink связан с маршрутом.

но как это на самом деле связано, но на самом деле происходит то, что происходит.компонент link является внутренним тегом привязки, когда вы нажимаете на него, он изменяет ваш URL.если ваш URL-адрес изменяется, это означает, что он изменяет ваше свойство url-адреса свойства match объекта prop.и в react мы знаем, что если какое-либо изменение prop вызывает повторное отображение.когда он повторно отображает соответствующий маршрут, путь которого совпадает с URL, отобразите компонент в его компонентных реквизитах.

//////////////////////////////////////////////////////////////////////////////////////////

из документации react-router .

Сопоставители маршрутов -> Есть два компонента сопоставления маршрутов: коммутатор и маршрут. Когда a отображается,{*** он выполняет поиск по своим дочерним элементам, чтобы найти тот, путь к которому соответствует текущему URL. Когда он находит один, он отображает его и игнорирует все остальные ***}. Это означает, что вы должны поместить s с более конкретными (обычно более длинными) путями перед менее конкретными.

Если совпадений нет, ничего не отображается (null).

//////////////////////////////////////////////////////////////////////////////////////////