reactjs - React Router - 渲染组件的问题。白屏

Question

我正在使用 react 路由器 dom 的仪表板工作。我有一个结构，即 Auth 页面和仪表板页面。当我从登录导航到 mainPages 并尝试在 DashboardContainer 中选择一个导航链接时，显示一个白色屏幕。

const MainContainer  = ()=>{
    return(
        <BrowserRouter>
            <div style={{flexDirection: 'row', display: 'flex'}}>
                <Route path="/login" exact component={LoginPage}/>
                <Route path="/main" exact component={DashBoardCotainer}/>

            </div>


        </BrowserRouter>
    )
}

export default MainContainer;

单击登录按钮并将我重定向到仪表板

const LoginPage  = (props)=>{
    return(
        <div style={{width: '100%', height: '100vh', alignItems: 'center', justifyContent: 'center', display: 'flex', flexDirection: 'column'}}>
            <h1>Vendedor Solar</h1>
            <button onClick={()=>{props.history.push( '/main' )}}>Logar</button>


        </div>
    )
}

export default LoginPage;

当我点击仪表板侧栏的导航链接时出现问题

const DashBoardCotainer = () => {
    return (

        <div style={{flexDirection: 'row', display: 'flex'}}>
            <Navigation/>
            <div style={{padding: 20}}>
                <Switch>
                    <Route path="/home" exact component={Home}/>
                    <Route path="/order" exact component={Orders}/>
                    <Route path="/contact" exact component={Contact}/>
                    <Route component={Error}/>
                </Switch>
            </div>

        </div>



    )
}

export default DashBoardCotainer;


class Navigation extends Component{

    constructor(props){
        super(props)
        this.state={
            navVisilbe:false
        }
    }

    render(){
        const {navVisilbe} = this.state

        return(
            <div style={{display:'flex', flexDirection: 'column', padding: 20, height: '100vh',
                backgroundColor: mainOrange}}>


                <NavLink to="/home"  exact

                        >Home</NavLink>
                <NavLink to="/order"  exact
                      >Pedidos</NavLink>
                <NavLink to="/contact"  exact

                         >Contatos</NavLink>


            </div>
        )
    }

}
export default Navigation

Answer 1

您应该为路由创建一个唯一的文件，您可以在其中创建“公共(public)”和“私有(private)”布局，如​​下所示

class MainContainer extends React.Component {
        render() {
        return(
            <BrowserRouter>
            <Switch> 
                <PublicLayout path="/login" exact component={LoginPage} />

                <PrivateLayout path="/home" exact component={Home} />
                <PrivateLayout path="/order" exact component={Order} />
                <PrivateLayout path="/contact" exact component={Contact} />
                // remove the 'exact' from route and you can make the nested routing working perfectly.. below example
                <PrivateLayout path="/contact/create" component={AddContact} />
            </Switch>
            </BrowserRouter>
        )
    }
}

export default MainContainer;

公共(public)布局

export const PublicLayout = ({ component: Component, ...rest }) => {  
    return <Route {...rest} render={(props) => (
        <React.Fragment>
          {<Component {...props} />} 
        </React.Fragment>  
    )} />
};

私有(private)布局

export const PrivateLayout = ({ component: Component, ...rest }) => {  

    const token = localStorage.getItem("token");   

    return <Route {...rest} render={(props) => (
        <React.Fragment>
          <div className="sideBar"><Navigation /></div>
            <div className="contentBar">
                {!token ? <Redirect to={{ pathname: '/login', state: { from: props.location }}} /> : <Component {...props} /> }  
            </div>
        </React.Fragment>  
    )} />
};

你的导航侧边栏

export class Navigation extends Component{

    constructor(props){
        super(props)
        this.state={
            navVisilbe:false
        }
    }

    render(){
        const {navVisilbe} = this.state

        return(
            <div style={{display:'flex', flexDirection: 'column', padding: 20, height: '100vh', backgroundColor: mainOrange}}>

                <NavLink to="/home"  exact  >Home</NavLink>
                <NavLink to="/order"  exact >Pedidos</NavLink>
                <NavLink to="/contact"  exact  >Contatos</NavLink>
                <NavLink to="/contact/create"  exact  >Edit Contatos</NavLink>

            </div>
        )
    }
}

希望这会有所帮助:)