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

Question

我正在使用 react-router-dom 在仪表板中工作。我有一个结构，即身份验证页面和仪表板页面。当我从登录导航到 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

您应该为路线创建一个唯一的文件，您可以在其中创建像这样的“公共”和“私人”布局

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;

公共布局

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

私人布局

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

希望这会有所帮助:)

Answer 2

所有这些路由都是嵌套的/main，因此您需要适当地更新链接。

更多嵌套路由详情：https://reacttraining.com/react-router/web/guides/quick-start/example-nested-routing

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

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

const DashBoardCotainer = ({ match }) => {
  return (
    <div style={{ flexDirection: "row", display: "flex" }}>
      <Navigation />
      <div style={{ padding: 20 }}>
        <Switch>
          <Route path={`${match.url}/home`} exact component={() => "Home"} />
          <Route path={`${match.url}/order`} exact component={() => "Orders"} />
          <Route
            path={`${match.url}/contact`}
            exact
            component={() => "Contact"}
          />
          <Route component={() => "error"} />
        </Switch>
      </div>
    </div>
  );
};

class Navigation extends React.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"
        }}
      >
        <NavLink to="/main/home" exact>
          Home
        </NavLink>
        <NavLink to="/main/order" exact>
          Pedidos
        </NavLink>
        <NavLink to="/main/contact" exact>
          Contatos
        </NavLink>
      </div>
    );
  }
}

function App() {
  return (
    <div className="App">
      <MainContainer />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 3

您需要在调用仪表板组件的位置中替换父组件中的所有路由。

const MainContainer  = ()=>{
    return(
        <BrowserRouter>
            <div style={{flexDirection: 'row', display: 'flex'}}>
                <Route path="/login" exact component={LoginPage}/>
                <Route path="/main" exact component={DashBoardCotainer}/>
                <Switch>
                    <Route path="/home" exact component={Home}/>
                    <Route path="/order" exact component={Orders}/>
                    <Route path="/contact" exact component={Contact}/>
                    <Route component={Error}/>
                </Switch>
            </div>
        </BrowserRouter>
    )
}

export default MainContainer;