reactjs - React 路由器 V4 - 警告 : You tried to redirect to the same route you're currently on: "/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>
        );
    }
}

我想始终加载应用程序，因此将其放在最高级别，标题和侧导航也应该始终加载，以便它们位于应用程序内部。

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

我知道它一定会出现/两次，所以这个警告。

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

任何帮助将不胜感激。

Answer 1

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