反应.登录后新建路由器 [英] React. New Router after login

问题描述

我在 React 中遇到路由器问题，登录后我将 Redux 中的类型状态从 0 更改为 1，然后我在我的应用程序文件中进行了切换，但出现错误

警告:[react-router] 你不能改变<Router routes>;它将被忽略

这是我的 index.js，如果用户登录，我想更改所有路由链接(登录表单工作正常，他们将 redux 状态类型更改为 1):

@connect((store)=>{控制台日志(存储)返回 {类型用户:store.app.type}})类 App 扩展了 React.Component{使成为(){开关(this.props.typeUser){案例0:{返回(<路由器历史={browserHistory}><Route path={"/"} component={MainPage}></Route><Route path={"/login"} component={Login}></Route><Route path={"product/:nameProduct/:id"} component={ProductDetails}></Route></路由器>)休息;}情况1:{返回(<路由器历史={browserHistory}><Route path={"/"} component={MainPageAfterLogin}></Route><Route path={"/login"} component={LoginAfterLogin}></Route></路由器>)休息;}}}}const app = document.getElementById('app');ReactDOM.render(<Provider store={store}><应用程序/></Provider>,app);

解决方案

您不能更改 Router 但您可以更改您拥有的 Routes 配置，因此您可以像

一样设置路由

class App extends React.Component{使成为(){返回(<路由器历史={browserHistory}>{this.props.typeUser === 0?<用户 1/>:<用户 2/>}</路由器>)}}类 User1 扩展了 React.Component {使成为() {返回 (<div><Route path={"/"} component={MainPage}></Route><Route path={"/login"} component={Login}></Route><Route path={"product/:nameProduct/:id"} component={ProductDetails}></Route>

)}}类 User2 扩展了 React.Component {使成为() {返回 (<div><Route path={"/"} component={MainPage}></Route><Route path={"/login"} component={Login}></Route>

)}}

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

这篇关于反应.登录后新建路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！