پیاده سازی لی آوت های مختلف در ری اکت — راهنمای کاربردی

1import React from 'react'
2import { BrowserRouter, Switch, Route } from 'react-router-dom'
3import Layout from './layouts/PrimaryLayout'
4import LoginLayout from './layouts/LoginLayout'
5import LeftNavLayout from './layouts/LeftNavLayout'
6import 'bootstrap/dist/css/bootstrap.min.css';
7import './App.css'
8
9class App extends React.Component {
10
11    render(){
12
13      return(
14        <div className="App">
15          <BrowserRouter>
16            <Switch>
17              <Route exact path="/login" render={(props) => <LoginLayout {...props} /> } />
18              <Route path='/dashboard' render={(props) => <Layout {...props} /> } />
19              <Route path='/nav' render={(props) => <LeftNavLayout {...props} /> } />
20            </Switch>
21          </BrowserRouter>
22        </div>
23      )
24   }
25
26 }
27
28export default App

1// removed for brevity
2
3class LoginLayout extends React.Component {
4
5    render(){
6      const { match } = this.props
7      return(
8        <>
9            <div className="login">
10                <Switch>
11                    <Route 
12                        exact path={`${match.path}`}
13                        render={(props) => <LoginPage {...props} /> }/>
14                    />
15                </Switch>
16            </div>
17        </>
18      )
19   }
20
21 }
22
23 LoginLayout.propTypes = {
24     match: PropTypes.any.isRequired
25 }
26
27export default LoginLayout

1import React from 'react'
2import { Switch, Route } from 'react-router-dom'
3import { ProfilePage } from '../profile/ProfilePage'
4import { PageD, PageE, PageF } from '../pages'
5import PropTypes from 'prop-types';
6import Button from 'react-bootstrap/Button';
7import 'bootstrap/dist/css/bootstrap.min.css';
8import '../App.css'
9
10class LeftNavLayout extends React.Component {
11
12    render(){
13      const { match } = this.props
14      return(
15        <>
16            <div className="row">
17                <div className="leftnav col-md-3">
18                    <div className="link row">
19                        <a href="/profile/paged">Page D</a>
20                    </div>
21                    <div className="link row">
22                        <a href="/profile/pagee">Page E</a>
23                    </div>
24                    <div className="link row">
25                        <a href="/profile/pagef">Page F</a>
26                    </div>
27                    <div className="row">
28                        <Button variant="warning" type="button">
29                            <a href="/dashboard">Go to Dashboard</a>
30                        </Button>
31                    </div>
32                </div>
33                <div className="col-md-9">
34                    <Switch>
35                        <Route 
36                            exact path={`${match.path}`}
37                            render={(props) => <ProfilePage {...props} /> }/>
38                        />
39                        <Route path={`${match.path}/paged`} component={PageD} />
40                        <Route path={`${match.path}/pagee`} component={PageE} />
41                        <Route path={`${match.path}/pagef`} component={PageF} />
42                    </Switch>
43                </div>
44            </div>
45        </>
46      )
47   }
48 }
49
50 LeftNavLayout.propTypes = {
51     match: PropTypes.any.isRequired
52 }
53
54export default LeftNavLayout

1// imports removed for brevity
2
3class DashboardLayout extends React.Component {
4
5    render(){
6      const { match } = this.props
7      return(
8        <>
9            <div className="">
10                <Header appTitle="React Multi Layout"/>
11                <Switch>
12                    <Route 
13                        exact path={`${match.path}`}
14                        render={(props) => <DashboardPage {...props} /> }/>
15                    />
16                    <Route path={`${match.path}/pagea`} component={PageA} />
17                    <Route path={`${match.path}/pageb`} component={PageB} />
18                    <Route path={`${match.path}/pagec`} component={PageC} />
19                </Switch>
20                <Footer />
21            </div>
22        </>
23      )
24   }
25 }
26
27 DashboardLayout.propTypes = {
28     match: PropTypes.any.isRequired
29 }
30
31export default DashboardLayout

1// removed imports for brevity
2
3class LeftNavLayout extends React.Component {
4
5    render(){
6      const { match } = this.props
7      return(
8        <>
9            <div className="row">
10                <div className="leftnav col-md-3">
11                    <div className="link row">
12                        <a href="/profile/paged">Page D</a>
13                    </div>
14                    <div className="link row">
15                        <a href="/profile/pagee">Page E</a>
16                    </div>
17                    <div className="link row">
18                        <a href="/profile/pagef">Page F</a>
19                    </div>
20                    <div className="row">
21                        <Button variant="warning" type="button">
22                            <a href="/dashboard">Go to Dashboard</a>
23                        </Button>
24                    </div>
25                </div>
26                <div className="col-md-9">
27                    <Switch>
28                        <Route 
29                            exact path={`${match.path}`}
30                            render={(props) => <ProfilePage {...props} /> }/>
31                        />
32                        <Route path={`${match.path}/paged`} component={PageD} />
33                        <Route path={`${match.path}/pagee`} component={PageE} />
34                        <Route path={`${match.path}/pagef`} component={PageF} />
35                    </Switch>
36                </div>
37            </div>
38        </>
39      )
40   }
41 }
42
43 LeftNavLayout.propTypes = {
44     match: PropTypes.any.isRequired
45 }
46
47export default LeftNavLayout