[英]React-router - redirect on load?
I'm new to React development and I'm not sure how to handle this. 我是React开发的新手,我不确定该如何处理。
I have a simple app with routes, it looks like this: 我有一个带有路线的简单应用,它看起来像这样:
<Router>
<div>
<Route path="/" component={MainComponent} />
<Route path="/dashboard" component={DashboardComponent} />
<Route path="/users" component={UsersComponent} />
<Route path="/admin" component={AdminComponent} />
</div>
</Router>
When I go to localhost:3000/myApp/index.html my MainComponent
loads as expected, it holds main layout of the site, navigation and so forth. 当我转到localhost:3000 / myApp / index.html时,我的
MainComponent
按预期加载,它保存了网站的主要布局,导航等。
Then I have to click on "Dashboard" to switch to DashboardComponent
, "Users" to move to UsersComponent
and "Admin" to load AdminComponent
, these are loaded next to the navigation from MainComponent
. 然后,我要点击“控制面板”,切换到
DashboardComponent
,“用户”移动到UsersComponent
和“管理”加载AdminComponent
,这些都是从旁边导航加载MainComponent
。
So it goes like this: 所以它是这样的:
localhost:3000/myApp = MainComponent
localhost:3000/dashboard = MainComponent + DashboardComponent
localhost:3000/users = MainComponent + UsersComponent
localhost:3000/admin = MainComponent + AdminComponent
What I want to achieve is to never load MainComponent
alone (as it holds nothing excepting navigation), but load DashboardComponent with it, so everything will work as before with a slight change: 我要实现的是永远
MainComponent
单独加载MainComponent
(因为它除了导航之外什么都不容纳),而是随其加载DashboardComponent,因此只要稍作更改,一切都将像以前一样工作:
localhost:3000/myApp = MainComponent + DashboardComponent
So I guess I want to load my MainComponent and then dashboard on init. 所以我想我想加载我的MainComponent,然后在init上安装仪表板。 It'd be very nice if the URL changes automagically from index.html to /dashboard too.
如果URL也自动从index.html更改为/ dashboard,那就太好了。
I tried doing something like this in my MainComponent.jsx: 我尝试在MainComponent.jsx中执行以下操作:
componentWillMount() {
<Redirect to="/dashboard" />
console.log("It works!");
}
But it does nothing, I think the router from first example in Application.jsx just overrides it. 但是它什么也没做,我认为Application.jsx中第一个示例中的路由器会覆盖它。
I think I might be doing something wrong because I feel like it's one of the most basic things with router but I can't find any answers and anything in documentation that would help me here. 我想我可能做错了什么,因为我觉得这是路由器最基本的事情之一,但是我找不到任何答案和文档中对我有帮助的任何东西。 Any hints?
有什么提示吗?
tl;dr I want localhost:3000/myApp/index.html
to redirect me localhost:3000/dashboard
when app starts (I think it should be enough for router to load what the right component). tl;博士,我希望
localhost:3000/myApp/index.html
在应用程序启动时将我重定向到localhost:3000/dashboard
(我认为路由器足以加载正确的组件)。
Rerouting does nothing (there are no errors, but the route is not changing): 重新路由不执行任何操作(没有错误,但路由没有更改):
<Router>
<div>
<Route path="/" component={MainComponent} />
<Route path="/dashboard" component={DashboardComponent} />
<Route path="/users" component={UsersComponent} />
<Route path="/admin" component={AdminComponent} />
<Route exact path="/" component={ () => <Redirect to={DashboardComponent} /> } />
</div>
</Router>
You should wrap your routes with the MainComponent
and wrap in Switch
and allow '/'
to show DashboardComponent
您应该使用
MainComponent
包装路线,并在Switch
包装,并允许'/'
显示DashboardComponent
<Router history={history}>
<MainComponent>
<Switch>
<Route exact path="/" component={DashboardComponent} />
<Route exact path="/dashboard" component={DashboardComponent} />
<Route exact path="/users" component={UsersComponent} />
<Route exact path="/admin" component={AdminComponent} />
</Switch>
</MainComponent>
</Router>
Or if you do not want '/'
to show the dashboard then you would use Redirect
: 或者,如果您不希望
'/'
显示仪表板,则可以使用Redirect
:
<Router history={history}>
<MainComponent>
<Switch>
<Redirect exact from="/" to="/dashboard" />
<Route exact path="/dashboard" component={DashboardComponent} />
<Route exact path="/users" component={UsersComponent} />
<Route exact path="/admin" component={AdminComponent} />
</Switch>
</MainComponent>
</Router>
Please Note: You will need to put this.props.children
in the render
method of MainComponent
. 请注意:您将需要把
this.props.children
在render
的方法MainComponent
。
Alternatively , you could put the <Switch>...</Switch>
inside your MainComponent
: 或者 ,您可以将
<Switch>...</Switch>
放在MainComponent
:
Router 路由器
<Router history={history}>
<Switch>
<Redirect exact from="/" to="/dashboard" />
<MainComponent />
</Switch>
</Router>
MainComponent MainComponent
class MainComponent extends React.Component {
...
render() {
return <span>
//Navigation content here....
<Switch>
<Route exact path="/dashboard" component={DashboardComponent} />
<Route exact path="/users" component={UsersComponent} />
<Route exact path="/admin" component={AdminComponent} />
</Switch>
</span>
}
}
Useful Links: 有用的链接:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.