Advertisement
Guest User

Untitled

a guest
Jun 24th, 2019
78
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.33 KB | None | 0 0
  1. import React, { Component } from 'react';
  2. import {
  3. BrowserRouter as Router,
  4. Link,
  5. Switch,
  6. Route
  7. } from 'react-router-dom';
  8. import Home from './Home';
  9. import About from './About';
  10. import Dashboard from '../admins/Dashboard';
  11. import Contact from './Contact';
  12.  
  13. <Router>
  14. <div>
  15. <nav className="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
  16. <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  17. <span className="navbar-toggler-icon"></span>
  18. </button>
  19.  
  20. <div className="collapse navbar-collapse" id="navbarSupportedContent">
  21. <ul className="navbar-nav mr-auto">
  22. <li className="nav-item active">
  23. <Link className="nav-link" to="/" exact
  24.  
  25. >Home</Link>
  26. </li>
  27. <li className="nav-item">
  28. <Link className="nav-link" to="/about">About Us</Link>
  29. </li>
  30.  
  31. <li className="nav-item">
  32. <Link className="nav-link" to="/contact">Contact</Link>
  33. </li>
  34. </ul>
  35. <form className="form-inline my-2 my-lg-0">
  36. <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
  37. <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  38. </form>
  39. </div>
  40. </nav>
  41. <Switch>
  42. <Route exact path='/' component={Home}/>
  43. <Route exact path="/about" component={About}/>
  44. <Route path='/contact' component={Contact}/>
  45. <Route path='/admins/dashboard' component={Dashboard}/>
  46. </Switch>
  47. </div>
  48. </Router>
  49.  
  50. import React, { Component } from 'react';
  51. import ReactDOM from 'react-dom';
  52. import {
  53. BrowserRouter as Router,
  54.  
  55. } from 'react-router-dom';
  56. import Header from './Header';
  57. import Footer from './Footer';
  58.  
  59.  
  60.  
  61. export default class Index extends Component {
  62.  
  63. render() {
  64. return (
  65. <div>
  66. <Header />
  67.  
  68. <Footer/>
  69. </div>
  70. );
  71. }
  72. }
  73.  
  74. if (document.getElementById('app')) {
  75. ReactDOM.render(<Index />, document.getElementById('app'));
  76. }
  77.  
  78. import React, { Component }from 'react';
  79. import { Redirect } from 'react-router-dom';
  80. class About extends Component {
  81.  
  82. constructor(props)
  83. {
  84. super(props);
  85. }
  86.  
  87. render(){
  88. return (
  89. <div className="jumbotron">
  90. <h2>About Us</h2>
  91. </div>
  92. );
  93. }
  94. }
  95.  
  96.  
  97.  
  98. export default About;
  99.  
  100. /**
  101. * First we will load all of this project's JavaScript dependencies which
  102. * includes React and other helpers. It's a great starting point while
  103. * building robust, powerful web applications using React + Laravel.
  104. */
  105.  
  106. require('./bootstrap');
  107.  
  108. /**
  109. * Next, we will create a fresh React component instance and attach it to
  110. * the page. Then, you may begin adding components to this application
  111. * or customize the JavaScript scaffolding to fit your unique needs.
  112. */
  113.  
  114. require('./components/Index');
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement