React Router V4 - Предупреждение: вы попытались перенаправить на тот же маршрут, в котором вы сейчас находитесь: "/home/dashboard"

Я получаю эту ошибку, пробовал разные способы маршрутизации, еще не повезло.

У меня есть файл конфигурации маршрута, т.е. Route.js

const Root = ({ store }) => (
    <Provider store={store}>
        <BrowserRouter>
            <div>
                <Route path='/' component={ App }/>  
            </div>
        </BrowserRouter>
    </Provider>
)

Теперь в App.js

class AppComp extends Component {
    render() {
        const {match} = this.props;
        let navClass = 'active';

        if(this.props.sideClass === "nav-ssh") {
            navClass = "active-ssh"; 
        }

        return (
            <div>
                <div className="container">
                    <div className="main">
                        <Route render={()=><Header sideNavClass={this.props.sideNavClass} />} />
                        <Route render={()=><SideNav navActiveClass={navClass} currentLocation={this.props.location.pathname} />}/>
                        <Redirect to="/home/dashboard" />s
                    </div>
                </div>
            </div>
        );
    }
}

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

Для любого неизвестного пути и для загрузки в первый раз я перенаправлен на /home/dashboard

Я понимаю, что это должно быть дважды, чтобы это предупреждение.

Как настроить мой маршрутизатор для достижения того же и разрешить предупреждение.

Любая помощь будет принята с благодарностью.

Ответы

Ответ 1

Я решил проблему. Здесь решение.

route.js

<Provider store={store}>
  <BrowserRouter>
    <div>
      <Route path="/" component={ App }/>
    </div>
  </BrowserRouter>
</Provider>

В App.js добавьте проверку match.url === window.location.pathname которая всегда верна для начального рендеринга, поэтому '/' перенаправляет на '/home/dashboard'. Добавление этого условия устраняет предупреждение о перенаправлении.

class AppComp extends Component {
  render() {
    const {match} = this.props;
    let 
        shouldRedirect = match.url === window.location.pathname, 
        redirectTo = <Redirect to="/home/dashboard" />;
    let navClass = 'active';
    if(this.props.sideClass === "nav-ssh") {
      navClass = "active-ssh"; 
    }
    return (
      <div>
        <div className="container">
          <div className="main">
            <Route render={()=><Header sideNavClass={this.props.sideNavClass} />} />
            <Route render={()=><SideNav navActiveClass={navClass} currentLocation={this.props.location.pathname} />}/>
            {shouldRedirect && redirectTo}
          </div>
        </div>
      </div>
    );
  }
}

Но теперь у вас будет ограничение: если пользователь введет какой-то неизвестный путь, он не будет перенаправлен на '/home/dashboard' то есть на наш маршрут по умолчанию.

Чтобы преодолеть это ограничение, вы должны добавить:

<Switch>
  {/*---- your additional routes goes here -----*/}
  <Redirect to="/home/dashboard" />
</Switch>

Добавьте приведенный выше код к компонентам, из которых вы обрабатываете остальную часть маршрутизации. Например для меня я добавил в Sidenav компонент.

Ответ 2

Используйте <Switch> вместо <div> для переноса маршрутов.

import React from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import { LoginScreen, LogoutScreen } from './components'

export default () => (
  <div>
    <Router>
      <Switch>
        <Route path='/login' component={LoginScreen}/>
        <Route path='/logout' component={LogoutScreen}/>
        <Route component={AuthenticatedRoutes}/>
      </Switch>
    </Router>
  </div>
)

Ответ 3

Даже я столкнулся с подобной проблемой. Это было разрешено для меня, когда я добавил точное в Route.Switch также необходимо добавить.

<Switch>
  <Route exact path='/' component={ App }/> 
</Switch>

Ответ 4

Я предполагаю, что вы настроите свои маршруты как

<Provider store={store}>
    <BrowserRouter>
        <div>
            <Route path="/" component={ App }/>
        </div>
    </BrowserRouter>
</Provider>

и App.js as

class AppComp extends Component {
    render() {
        const {match} = this.props;
        let navClass = 'active';

        if(this.props.sideClass === "nav-ssh") {
            navClass = "active-ssh"; 
        }

        return (
            <div>
                <div className="container">
                    <div className="main">
                        <Route render={()=><Header sideNavClass={this.props.sideNavClass} />} />
                        <Route render={()=><SideNav navActiveClass={navClass} currentLocation={this.props.location.pathname} />}/>
                       <Switch>
                            <Route path='/home/dashboard' component={ Dashboard }/>

                             <Redirect to='/home/dashboard'/>
                       </Switch>
                    </div>
                </div>
            </div>
        );
    }
}

Ответ 5

Если бы эта же проблема - пыталась перенаправить, но получала ошибку, и я считаю, что все, что вам нужно, это switch:

<Route render={()=><Header sideNavClass={this.props.sideNavClass} />} />
  <Switch>
    <Route render={()=><SideNav navActiveClass={navClass} currentLocation={this.props.location.pathname} />}/>
    <Redirect to="/home/dashboard" />
  </Switch>
</Route>