React Router V4 - 警告：您试图重定向到您当前所在的同一路线：“/home/dashboard”

Question

我收到这个错误尝试了不同的路由方式仍然没有成功。

我有路由配置文件，即 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>
        );
    }
}

我想始终加载应用程序，因此将其置于最高级别，并且 header 和 sidenav 也应始终加载，以便它们位于应用程序内。

对于任何未知路径和第一次加载我重定向到 /home/dashboard

我知道它必须来 / 两次所以这个警告。

如何配置我的路由器以实现相同的目的并解决警告。

如有任何帮助，我们将不胜感激。

Answer 1

我猜你会像这样配置你的路由

<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} />}/>
                       <Switch>
                            <Route path='/home/dashboard' component={ Dashboard }/>

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

Answer 2

我解决了这个问题。这是一个解决方案。

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 组件。

Answer 3

有同样的问题 - 试图重定向但出现错误，我相信你只需要切换：

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

Answer 4

甚至我也遇到过类似的问题。当我在 Route.Switch 中添加 exact 时，我得到了解决，也必须添加。

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

Answer 5

使用 <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>
)

React Router V4 - 警告：您试图重定向到您当前所在的同一路线：“/home/dashboard”

React Router V4 - Warning: You tried to redirect to the same route you're currently on: "/home/dashboard"

reactjs

react-router-v4