javascript - react router redirects to home page on refresh

Question

I have the following code:

let routes = 
        <Switch>
            <Route path="/" exact component={Authentication} />
            <Route path="/test" exact render = {props=> <Authentication/>} />
            <Redirect to="/" />
        </Switch>
        if(this.props.isLoggedIn){
            routes = 
                <>
                    <div className='mobile-header' onClick={this.handleNavBarShow}>
                        <p className="mobile-menu-icon">
                            <i className="fa fa-bars"></i>
                        </p>
                    <p>Title</p>
                    </div>
                    <NavBar toShow = {this.state.showMobileNavBar} 
                            onClicked = {(e)=>this.handleShowAndHide(e,true)}
                    />
                    <Switch>
                        <Route path ="/" exact render = {props=> <Authentication/>}/>   
                        <Route path ="/a" exact render = {props=> <Test1/>}/>
                        <Route path = "/b" exact render ={props =><Test2/>}/>
                        <Route path = "/c" exact render ={props =><Test3/>}/>

                        <Redirect to="/" />
                    </Switch>
                </>
        }
        return (
        <Router>
            <div className = "layout" onClick={(event)=>this.handleShowAndHide(event,false)}>
                {routes} 
                {showSideBar}         
            </div>
        </Router>
        )

problem is when this.props.isLoggedIn === true, whenever i try to reload a route "/a" "/b" "/c", or type it in the adress bar directly it redirects to the "/" page. In the Test1 /Test2 /Test 3 components there are links to one another and it works fine. also it works fine with reloading and direct typing when this.props.isLoggedIn !== true. what could be the problem?

Answer 1

等待大神解答