简体   繁体   中英

React. New Router after login

I have problem with Router in React, after login i change type state in Redux from 0 to 1, then i make switch in my App file, but i got error

Warning: [react-router] You cannot change <Router routes>; it will be ignored

This is my index.js, I want change all Route links if user is login (form with login work good and they change redux state type to 1):

@connect((store)=>{
    console.log(store)
    return {
        typeUser: store.app.type
    }

})
class App extends React.Component{

    render(){
        switch(this.props.typeUser){
            case 0:{
        return(
        <Router history={browserHistory}>
            <Route path={"/"} component={MainPage}></Route>
            <Route path={"/login"} component={Login}></Route>
            <Route path={"product/:nameProduct/:id"} component={ProductDetails}></Route>
        </Router>
        )
        break;
        }
            case 1:{
                return(
                <Router history={browserHistory}>
                    <Route path={"/"} component={MainPageAfterLogin}></Route>
                    <Route path={"/login"} component={LoginAfterLogin}></Route>
                </Router>
                )
                break;
            }
    }
    }
}

const app = document.getElementById('app');
ReactDOM.render(<Provider store={store}>
  <App/>
  </Provider>,app);

You cannot change the Router but you can change the Routes configuration that you have , so you can setup the Routes like

 class App extends React.Component{ render(){ return( <Router history={browserHistory}> {this.props.typeUser === 0? <User1/>: <User2/>} </Router> ) } } class User1 extends React.Component { render() { return ( <div> <Route path={"/"} component={MainPage}></Route> <Route path={"/login"} component={Login}></Route> <Route path={"product/:nameProduct/:id"} component={ProductDetails}></Route> </div> ) } } class User2 extends React.Component { render() { return ( <div> <Route path={"/"} component={MainPage}></Route> <Route path={"/login"} component={Login}></Route> </div> ) } } 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM