redux is not updating states in component - reactjs

Question

From below code ,if i remove routes variable from code1 and go with code2 code than
i did not face any problem .but if i comment code2 routes variable and work with the code1
than i am facing problem that when i click on submit button of Auth.js file or /auth route
(without or with selecting any ingredient from /burgerBuilder route.
when user click on submit button of Auth.js file .it will dispatch auth action in redux store
than that will dispatch authStart than after receiving response from firebase than we dispatch authSuccess which changes token and some other data in redux.
than this changes will rerender all component who has auth object state in their mapStateToProps.but token is not updating in mapStateToProps in Auth.js file
where am i wrong .
complete code you can check on below link
[1]: https://codesandbox.io/s/goofy-kowalevski-mos8f?fontsize=14&hidenavigation=1&theme=dark
but i am getting problem when i conditioned routes in App.js file. if i dont do that than it works fine more i have already described in App.js file with code as well.
class App extends Component {
render(){
//console.log("App.js");
//code1::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
let routes ;
routes = (
<Switch>
<Route path="/auth" component={Auth}/>
<Route path="/" exact component={BurgerBuilder} />
</Switch>);
if(this.props.token)
{
routes = (
<Switch>
<Route path="/checkout" component={Checkout} />
<Route path="/orders" component={Orders} />
<Route path="/logout" component={Logout} />
<Route path="/" exact component={BurgerBuilder} />
</Switch>);
}
//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//code2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
routes = (
<Switch>
<Route path="/auth" component={Auth}/>
<Route path="/checkout" component={Checkout} />
<Route path="/orders" component={Orders} />
<Route path="/logout" component={Logout} />
<Route path="/" exact component={BurgerBuilder} />
</Switch>);
//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
return (
<div>
<Layout>
{routes}
</Layout>
</div>
);
}
componentDidMount() {
this.props.onAuthCheck();
}
}
const mapStateToProps = (state)=>{
return {
token:state.auth.token
}
}
const mapDispatchToProps = (dispatch) => {
return{
onAuthCheck:() =>dispatch(authCheckState()) //when try to auto signin
}
}
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(App));
what i have already tried -> i have followed a question on stackoverflow that was telling that is because of unupdated react and react-dom .i am stuck in it from 12 hours .
thanks in advance.

Answer 1

i already mentioned that when i got the problem in question .when user was submitting the form it causes rerendering because of i received token from a server using an auth action.and i have conditioned my routes in such a way that it does not contain auth.js file (login/signup) page route. so that now it(auth.js) does not render because i omitted route of auth.js file(login/signup page).and even i have logged in and successfully received token but was still on the same url because the redirection code that i have written inside auth.js file does not execute.
some more information and refrence more clarity .-->
i known Link or NavLink component is related to Route .
but how it actually related
but actually what happening is .link component is internally an anchor tag when you click on that it changes your url .if your url changes mean it is changing your url property of match property of prop object.and in react we know if any prop changes it causes re-rendring.when it re-render the corresponding route whose path matches with the url render the component in its component props.
//////////////////////////////////////////////////////////////////////////////////////////
from react-router documentation .
Route Matchers-->
There are two route matching components: Switch and Route. When a is rendered,{*** it searches through its children elements to find one whose path matches the current URL. When it finds one, it renders that and ignores all others***}. This means that you should put s with more specific (typically longer) paths before less-specific ones.
If no matches, the renders nothing (null).
//////////////////////////////////////////////////////////////////////////////////////////