Question

我在React中遇到Router的问题，登录后我将Redux中的类型状态从0更改为1，然后我在我的App文件中切换，但是我收到错误

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

这是我的index.js，如果用户登录，我希望更改所有Route链接（登录工作正常，并将redux状态类型更改为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);

Answer 1

您无法更改Router，但可以更改您拥有的Routes配置，因此您可以设置路径

＆＃13;

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>
    ) 
    }
}

＆＃13;

反应。登录后的新路由器

1 个答案: