Question

我已在index.html中添加了引导CDN链接

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

以下是我从中执行用户登录的App组件。成功登录后，它将重定向到仪表板。最初它可以正确显示仪表板，但是当我刷新组件时，引导程序将停止工作，从而使UI混乱。

App.js

class App extends React.Component {
  render() {
    return (
      <div className="App">
      <Routing /> 
      </div>

    );
  }
}

export default App;

Routing.js

export const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={(props) => {
        console.log(props);
        return ("true")  //add token 
            ? 
                <Component {...props} />
            : <Redirect to='/login' />
    }
    } />
)
export default class Routing extends React.Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route path="/dashboard" component={Dashboard} />
                    <Route exact path="/" component={Login} />
                    <Route exact path="/login" component={Login} />
                </Switch>
            </Router>
        )
    }
}

登录组件API调用

handleSubmit = () => {
    const { email, password } = this.state;
    if (!email || !password) {
        this.setState({ error: 'Please enter all the fields' })
    }
    else if (this.validateEmail(email)) {
        //assuming a successful API CALL.
        this.props.history.push('/dashboard/customers');
    }
}

dashboard.js

export default class Dashboard extends React.Component {
    render() {
        return (
            <div>
                <div>
                    <Header />
                </div>
                <div>
                    <SideBar />
                </div>
                <div>
                    <Router>
                        <Switch>
                            {/* <Route exact path="/dashboard" component={Dashboard} /> */}
                            <Route  path="/dashboard/customers" component={ManageCustomers} />
                            <Route exact path="/dashboard/deliveryboys" component={ManageDeliveryBoys} />
                            <Route exact path="/dashboard/commissionrates" component={ManageCommissionRates} />
                            <Route exact path="/dashboard/enquires" component={ManageEnquiries} />
                            <Route exact path="/dashboard/advertisements" component={ManageAdvertisements} />
                            <Route exact path="/dashboard/transactions" component={Transactions} />
                            <Route exact path="/dashboard/requirements" component={Requirements} />
                        </Switch>
                    </Router>
                </div>
            </div>
        )
    }
}

我提到的问题是在dashoard中添加了嵌套路由。当我刷新页面时，它没有得到引导类。但是，该组件最初是使用bootstrap类呈现的。

引导类不适用于React组件中的刷新

0 个答案: