反应路线不起作用并提供适当的组件

时间:2018-08-03 04:11:39

标签: reactjs react-router

我目前正在使用/ users作为网址并呈现了一个组件的页面。在此页面中,我需要一个链接,该链接将我带到/ roles,并且在用户组件中进行了以下操作

<li><Link to="/roles">{data.firstName}</Link></li>

链接到这里后,我在路由器中添加了一个'/ roles路由,但它似乎仍然无法正常工作。 这是路由器部分。

<Router>


 <Switch>
                <Route path="/login" component={Login} />
                <PrivateRoute  path='/users' component={OrganizationUser} />
                <PrivateRoute path='/' component={Organization} />
                <PrivateRoute path='/home' component={Home} />
                <PrivateRoute path ='/roles' component={Home1} />

            </Switch>
        </Router>

我看到的是在'/ roles'上,我仍然在屏幕上而不是Home1上显示组织。

1 个答案:

答案 0 :(得分:0)

当路由器看到path=/使用此路由时,由于此路由先于/role然后呈现,因此只需重新排列如下路由即可:

 <Switch>
            <Route path="/login" component={Login} />
            <PrivateRoute  path='/users' component={OrganizationUser} />
            <PrivateRoute path='/home' component={Home} />
            <PrivateRoute path ='/roles' component={Home1} />
            <PrivateRoute path='/' component={Organization} />


        </Switch>

如果您不希望重新绑定,可以像这样向exact添加path=/适当

<Switch>
            <Route path="/login" component={Login} />
            <PrivateRoute  path='/users' component={OrganizationUser} />
            <PrivateRoute exact path='/' component={Organization} />
            <PrivateRoute path='/home' component={Home} />
            <PrivateRoute path ='/roles' component={Home1} />

        </Switch>