Jim's
Tutorials

I learned react router and made my navbar with assorted pages, and put the components in the right pages rather than having everything grouped onto one page. I got some svg files and realized they are too big or something, gotta see about compressing them or if something else is wrong. would love to use crisp clear svg's for these images. here is the router code;

import React, { Component } from 'react';
import {BrowserRouter as Router, Route } from 'react-router-dom';
import '../stylesheets/App.css';
import Homecontainer from './Homecontainer';
import NavBar from '../scenes/navbar/components/NavBar';
import Aboutpage from '../scenes/navbar/components/Aboutpage';
import Contactpage from '../scenes/navbar/components/Contactpage';
import Gridlist from '../scenes/projects/components/Gridlist';
import Slider from '../scenes/projects/components/myslider/Slider';
import images from  '../data/projectData';
import text from '../data/projectText';

class App extends Component {
  render() {
    return (
        <Router>
            <div>

                <Route path='/' component={NavBar} />

                <Route exact path = '/' component ={Homecontainer}/>

                <Route exact path = "/about" component={Aboutpage} />

                <Route exact path = '/contact' component={Contactpage}/>

                <Route exact path ='/projects' component={Gridlist}/>

                <Route exact path ='/project1'
                    render={ () =><Slider
                    images={images}
                    text={text.text1}
                    />}/>

                <Route exact path='/project2'
                    render={() =><Slider
                    images={images}
                    text={text.text2}
                    />}/>

                <Route exact path='/project3'
                    render={() =><Slider
                    images={images}
                    text={text.text3}
                    />}/>

                <Route exact path='/project4'
                    render={() =><Slider
                    images={images}
                    text={text.text4}
                    />}/>

                <Route exact path='/project5'
                    render={() =><Slider
                    images={images}
                    text={text.text5}
                    />}/>

                <Route exact path='/project6'
                render={() =><Slider
                    images={images}
                    text={text.text6}
                />}/>

            </div>
        </Router>
            );
          }
        }

export default App;

still need to style this sucker but at least have routes that work...