creazione routing notfound e About

master
lordcommander 2020-01-12 18:08:48 +01:00
parent 341163fed2
commit 07e5183266
5 changed files with 43 additions and 4 deletions

14
src/About.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
import Navbar from './Navbar';
class About extends React.Component {
render() {
return (
<>
<Navbar brand="LORDNABBO" />
</>
);
}
}
export default About;

View File

@ -2,7 +2,9 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';
const Home = lazy(() => import('./Home'));
//const About = lazy(() => import('./About'));
const About = lazy(() => import('./About'));
const Notfound = lazy(() => import('./notfound'));
class App extends React.Component {
render() {
@ -11,6 +13,9 @@ class App extends React.Component {
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/About" component={About}/>
<Route component={Notfound} />
</Switch>
</Suspense>
</Router>

View File

@ -1,4 +1,5 @@
import React from 'react'
import {Link} from 'react-router-dom'
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './Buttons.css';
@ -16,7 +17,7 @@ export default class NavButton extends React.Component {
export class Button extends React.Component {
render() {
return (
<button className="btn1">{this.props.name}</button>
<button className="btn1" type="button"><Link to="/About">{this.props.name}</Link></button>
);
}
}

View File

@ -14,11 +14,15 @@ class Navbar extends React.Component {
</button>
<div className="collapse navbar-collapse flex" id="navButtons">
<ul className="navbar-nav nav-mod">
<NavButton name="Home" />
<NavButton name="Home" lhref="/" />
<NavButton name="Film" />
<NavButton name="Series" />
<NavButton name="About" />
<NavButton name="About" lhref="/About" />
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn1" type="submit">Search</button>
</form>
</div>
</nav>
);

15
src/notfound.js Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
import Navbar from './Navbar';
class NotFound extends React.Component {
render() {
return (
<>
<Navbar brand="LORDNABBO" />
<div><h1>I MEME 404</h1></div>
</>
);
}
}
export default NotFound;