请问一下啊，直接npm start之后窗口默认是localhost:3000，并不会自动跳到localhost:3000/login

来源：8-1 牛人列表-应用骨架

Owen胡欧文

2018-03-06

请问一下啊，直接npm start之后窗口默认是localhost:3000，并不会自动跳到localhost:3000/login, 也就是并没有通过AuthRoute进行路由的跳转，并且因为增加了dashboard的路由之后因为首先没有通过AuthRoute进行跳转而导致了首先加载dashboard，而此时该组件里面有些数据是undefined，所以导致了页面显示错误，这个不知道后面有没有解决

写回答

2回答

慕粉0010189952

2018-04-30

其实是这样的, find方法如果没有找到符合条件的元素就会返回undefined, 你在访问根目录或随便一个你没有指定过的目录的时候，由于这段代码

<NavBar mode="dark" className="am-navbar">{navList.find((v)=>(v.path===pathname)).title}</NavBar>
<div >
    <Switch>
        {navList.map(v=>(
            <Route key={v.path} path={v.path} component={v.component}/>
        ))}
    </Switch>
</div>

你应该知道这段代码的上方定义了

const {pathname} = this.props.location;

这个时候的pathname是你当前访问的目录，比如根目录，那pathname就是"/",那么navList将不会找到任何符合v.path===pathname条件的元素。就会返回undefined导致报错。

我的修改方法是先判断一下是否有

navList.find((v)=>(v.path===pathname))!==undefined

如果结果不是undefined再返回组件，否则返回一个

<Redirect to={`/${this.props.user.type}`}/>;

总体代码如下

return navList.find((v)=>(v.path===pathname))!==undefined ? (
    <div>
        <NavBar mode="dark" className="am-navbar">{navList.find((v)=>(v.path===pathname)).title}</NavBar>
        <div >
            <Switch>
                {navList.map(v=>(
                    <Route key={v.path} path={v.path} component={v.component}/>
                ))}
            </Switch>
        </div>
        <NavLinkBar data={navList} className="am-tab-bar"/>
    </div>
) : <Redirect to={`/${this.props.user.type}`}/>;

如果你使用redux-devtools你可以发现即使之前报undefined,redux中是有数据的，这说明实际上页面经过了authRoute组件并完成了loadData,所以并不是authRoute的问题。