From b20edb1bfcaa8d2c75a537f31d9af92e8c6b04e7 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 7 Mar 2018 15:43:05 -0600 Subject: [PATCH] page not changing after clicking on Nav bar --- src/App.js | 38 ++++++++++++++++++++++++++-------- src/components/Charts.js | 11 ++++++++++ src/components/Marquee.js | 4 ++-- src/components/Profile.js | 5 ++--- src/components/Profiles.js | 7 +++---- src/components/Settings.js | 11 ++++++++++ src/components/SideNav.js | 42 ++++++++++++++++++++++++++++++-------- src/components/Tables.js | 11 ++++++++++ src/components/Wall.js | 11 ++++++++++ src/components/index.html | 21 +++++++++++++++++++ 10 files changed, 134 insertions(+), 27 deletions(-) create mode 100644 src/components/Charts.js create mode 100644 src/components/Settings.js create mode 100644 src/components/Tables.js create mode 100644 src/components/Wall.js create mode 100644 src/components/index.html diff --git a/src/App.js b/src/App.js index 15bddc9..396bb3b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,19 +1,39 @@ import React from "react"; import TopNav from "./components/TopNav"; import SideNav from "./components/SideNav"; +import Dashboard from "./components/Dashboard"; +import Charts from "./components/Charts"; +import Tables from "./components/Tables"; +import Settings from "./components/Settings"; +import Wall from "./components/Wall"; +import Profiles from "./components/Profiles"; +import Marquee from "./components/Marquee"; +import Profile from "./components/Profile"; +import {BrowserRouter, Switch, Route} from "react-router-dom"; function App() { return ( -
-
- -
- {/* PUT YOUR ROUTES HERE */} +
+ +
+ +
+ + + + + + + + + + +
-
+
); diff --git a/src/components/Charts.js b/src/components/Charts.js new file mode 100644 index 0000000..d523009 --- /dev/null +++ b/src/components/Charts.js @@ -0,0 +1,11 @@ +import React from "react"; + +function Charts() { + return ( +
+ Charts +
+ ); +} + +export default Charts; diff --git a/src/components/Marquee.js b/src/components/Marquee.js index 820e8c4..1112af2 100644 --- a/src/components/Marquee.js +++ b/src/components/Marquee.js @@ -1,8 +1,8 @@ import React from "react"; function Marquee(props) { - const message = "hello"; - return ( + const message = props.match.params.text; + return ( {message} ); } diff --git a/src/components/Profile.js b/src/components/Profile.js index c4eb646..cc2f23f 100644 --- a/src/components/Profile.js +++ b/src/components/Profile.js @@ -2,9 +2,9 @@ import React from "react"; import {connect} from "react-redux"; function Profile(props) { - const userId = 0; + const userId = props.match.params.id;; const user = props.users.find(u => u.id == userId) || {}; - return ( + return (

{user.firstName} {user.lastName}

{user.occupation}

@@ -18,4 +18,3 @@ function Profile(props) { export default connect(function (state) { return {users: state.users}; })(Profile); - diff --git a/src/components/Profiles.js b/src/components/Profiles.js index 3409812..bf2148b 100644 --- a/src/components/Profiles.js +++ b/src/components/Profiles.js @@ -1,4 +1,5 @@ import React from "react"; +import {Link} from "react-router-dom"; import {connect} from "react-redux"; function Profiles(props) { @@ -6,10 +7,10 @@ function Profiles(props) { return (
{user.firstName} - {user.lastName} - View + View
); }); - return ( + return (
{userDivs}
); } @@ -17,5 +18,3 @@ function Profiles(props) { export default connect(function (state) { return {users: state.users}; })(Profiles); - - diff --git a/src/components/Settings.js b/src/components/Settings.js new file mode 100644 index 0000000..12b9cf5 --- /dev/null +++ b/src/components/Settings.js @@ -0,0 +1,11 @@ +import React from "react"; + +function Settings() { + return ( +
+ Settings +
+ ); +} + +export default Settings; diff --git a/src/components/SideNav.js b/src/components/SideNav.js index 9caaf7c..25ba6f0 100644 --- a/src/components/SideNav.js +++ b/src/components/SideNav.js @@ -1,29 +1,53 @@ import React from "react"; -// import {Link} from "react-router-dom"; +import {Link} from "react-router-dom"; function SideNav() { return (
  • - {/* - Dashboard + Dashboard - */}
  • - + Charts - +
  • - + Tables - + + + Settings + +
    • +
  • + + Wall + +
    • +
  • + + Profiles + +
    • +
  • + + Marquee I love routes + +
    • +
  • + + Marquee React Routes Rule + + + Marquee I LOVE TONY ROMO +
-
); +
); } export default SideNav; diff --git a/src/components/Tables.js b/src/components/Tables.js new file mode 100644 index 0000000..40e391e --- /dev/null +++ b/src/components/Tables.js @@ -0,0 +1,11 @@ +import React from "react"; + +function Tables() { + return ( +
+ Tables +
+ ); +} + +export default Tables; diff --git a/src/components/Wall.js b/src/components/Wall.js new file mode 100644 index 0000000..9f89445 --- /dev/null +++ b/src/components/Wall.js @@ -0,0 +1,11 @@ +import React from "react"; + +function Wall() { + return ( +
+ Wall +
+ ); +} + +export default Wall; diff --git a/src/components/index.html b/src/components/index.html new file mode 100644 index 0000000..7b2848a --- /dev/null +++ b/src/components/index.html @@ -0,0 +1,21 @@ + + + + + Battleship React + + + + +
+ +
+ + + + + + +