鍍金池/ 問答/Java  HTML/ react錯誤

react錯誤

我在組件里面寫了個backToLogin就出現(xiàn)這么一堆錯誤了 應(yīng)該是可以這么寫的
import React from 'react'
import { Route, Link, Redirect } from 'react-router-dom'
import Aaa from './Aaa'
import { connect } from 'react-redux'

function Bbb() {

return <h1>bbb頁面</h1>

}
function Abc() {

return <p>1234567</p>

}
@connect(

state => state.auth

)
class DashBoard extends React.Component {

render() {
    const backToLogin = <Redirect to="/login"></Redirect>
    const app = (
        <div>
           <ul>
               <li>
                 <Link to="/dashBoard">aaa頁面</Link>
               </li>
               <li>
                 <Link to="/dashBoard/Bbb">bbb頁面</Link>
               </li>
           </ul>
           <Route path="/dashBoard" exact component={Aaa}></Route>
           <Route path="/dashBoard/Bbb" component={Bbb}></Route>
           <Route path="/login" component={Abc}></Route>
        </div>
    )
    return this.props.isAuth ? app : backToLogin
}

}

export default DashBoard
圖片描述

回答
編輯回答
孤慣

從代碼看不出問題。
但是從異常可以知道應(yīng)該是react的語法有問題。

2018年4月4日 06:23
編輯回答
氕氘氚
return this.props.isAuth ? app : backToLogin

當(dāng)isAuth為false時，這里會一直Redirect到"/login"，即便是路由已經(jīng)是"/login"你仍舊渲染了這個重定向組件，就造成了一個死循環(huán)。

其實你這么寫就好了

render() {
    return(
        <div>
           <ul>
               <li>
                 <Link to="/dashBoard">aaa頁面</Link>
               </li>
               <li>
                 <Link to="/dashBoard/Bbb">bbb頁面</Link>
               </li>
           </ul>
           {!this.props.isAuth && <Redirect to="/login" />}
           <Route path="/dashBoard" exact component={Aaa}></Route>
           <Route path="/dashBoard/Bbb" component={Bbb}></Route>
           <Route path="/login" component={Abc}></Route>
        </div>
    )
}
2018年7月5日 08:32