reactjs React Router V4 - 警告：您尝试重定向到当前所在的同一路由：“/home/dashboard”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47474448/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Router V4 - Warning: You tried to redirect to the same route you're currently on: "/home/dashboard"
提问by Arjita Mitra
I am getting this error tried different ways of routing still no luck.
我收到此错误尝试了不同的路由方式仍然没有运气。
I have route config file i.e route.js
我有路由配置文件，即 route.js
const Root = ({ store }) => (
<Provider store={store}>
<BrowserRouter>
<div>
<Route path='/' component={ App }/>
</div>
</BrowserRouter>
</Provider>
)
Now at App.js
现在在 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>
);
}
}
I want to load app always so put it in the highest level and header and sidenav should also gets loaded always so they are inside app.
我想总是加载应用程序，所以把它放在最高级别，标题和 sidenav 也应该总是加载，所以它们在应用程序内。
For any unknown path and for first time load I redirected to /home/dashboard
对于任何未知路径和第一次加载，我重定向到 /home/dashboard
I understand it must be coming to / twice so this warning.
我知道它必须到达 / 两次，所以这个警告。
How can I configure my router to achieve the same and resolve the warning.
如何配置我的路由器以实现相同的功能并解决警告。
Any help would be greatly appreciated.
任何帮助将不胜感激。
采纳答案by Arjita Mitra
I resolved the issue. Here's a solution.
我解决了这个问题。这是一个解决方案。
路由.js<Provider store={store}>
<BrowserRouter>
<div>
<Route path="/" component={ App }/>
</div>
</BrowserRouter>
</Provider>
At App.js add a check match.url === window.location.pathnamewhich is always true for initial rendering so '/'redirects to '/home/dashboard'. Adding this condition resolves the redirect warning.
在 App.js 添加一个match.url === window.location.pathname对于初始渲染始终为 true的检查，因此'/'重定向到'/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>
);
}
}
But you will have a limitation now, if user enters some unknown path then it won't redirect to '/home/dashboard'i.e to our default route.
但是你现在会有一个限制，如果用户输入一些未知的路径，那么它不会重定向到'/home/dashboard'ie 到我们的默认路由。
To overcome that limitation you have to add :
要克服该限制，您必须添加：
<Switch>
{/*---- your additional routes goes here -----*/}
<Redirect to="/home/dashboard" />
</Switch>
Add the above code to the components from where you handle rest of the routing. For example for me I have added to Sidenav component.
将上述代码添加到处理其余路由的组件中。例如对我来说，我已经添加到 Sidenav 组件。
回答by UtkarshPramodGupta
Use <Switch>, instead of <div>to wrap the routes.
使用<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>
)
回答by Shruthi S
Even I faced similar issue. It was resolved to me when I added exact in Route.Switch also must be added.
甚至我也遇到了类似的问题。当我在 Route.Switch 中添加精确时，我解决了这个问题，也必须添加。
<Switch>
<Route exact path='/' component={ App }/>
</Switch>
回答by Shubham Khatri
I guess you would configure your Routes like
我猜你会像这样配置你的路线
<Provider store={store}>
<BrowserRouter>
<div>
<Route path="/" component={ App }/>
</div>
</BrowserRouter>
</Provider>
and App.js as
和 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>
);
}
}
回答by Boomer Rogers
Had this same issue - was trying to redirect but was getting an error and I believe all you need is 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>
