Блог

Мои <Redirect/> работы корректно выполняются на всех компонентах под моим App.js, которая определяет <Router> структуру.

Например, если у меня есть <SomeComponent> где-то внизу, это правильно перенаправляет на /error в случае ошибок:

SomeComponent.js

 return (<>      
    {
        error.message amp;amp; <Redirect to="/error" />
    }
 

Но на высшем уровне в App.js Мне также нужно проверить наличие ошибок и при необходимости перенаправить. Здесь я также определяю основную <Router> структуру. По какой-то причине это перенаправление верхнего уровня не работает:

App.js

 return (<>
        <div className="App">
            <Router>
                {/* I am inside Router, so there shouldn't be any issues */}

                {/* Check for errors and redirect as usual */}
                {
                   error.message amp;amp; <Redirect to="/error" />
                }      

                <Main /> {/* The <Main> component has Switch/Route */}
          
            </Router>
        </div>
       );
 

Есть идеи, почему? К вашему сведению, маршрутизатор определяется как import { BrowserRouter as Router } from "react-router-dom" .