CODEWITHSUNDEEP
reactjsjsxreact-router-v4
Rin and Len
Rin and Len

Reputation: 507

React BrowserRouter mashing two pages together

Following a tutorial and trying to build on it; I wanted to add a new page to the app. What happens is that when I navigate from "MovieList" to "MovieDetail.js" and then to "About", I have all of header from App.js, the MovieDetail info from that view, and the info on the About page.

I should not be mixing up the About page with anything but the header. What terrible routing monster have I created here?

https://github.com/ctp-placebo/ghibli 

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import styled from 'styled-components';
import logo from './static/sootball.png';
import './css/App.css';

import MoviesList from './views/MoviesList';
import MovieDetail from './views/MovieDetail';
import About from './views/About';

const App = () => (
  <Router>
    <div className="App">
      <header key={0}>
        <section className="hero is-info">
          <div className="constainer">
            <div className="columns">
              <div className="column is-1">
                <Link className="LinkSiteName" to="/">
                  <img src={logo} className="App-logo" alt="logo" />
                </Link>
              </div>
              <div className="column is-3">
                <Link className="LinkSiteName" to="/">
                  <SiteName>Studio Ghibli Filmography</SiteName>
                </Link>
              </div>
              <div className="column is-half">
                <SiteDesc>
									something
                </SiteDesc>
                <SiteDesc>
									more info
                </SiteDesc>
              </div>
            </div>
          </div>
        </section>
      </header>

      <div key={1}>
        <div className="navbar is-link" role="navigation" aria-label="main navigation">
          <Link className="navbar-item" to="/">
						Home
          </Link>
          <Link className="navbar-item" to="/About/">
						About
          </Link>
        </div>
      </div>

      <Switch>
        <Route exact path="/" component={MoviesList} />
        <Route path="/:id" component={MovieDetail} />
      </Switch>

      <Route exact path="/About" component={About} />
    </div>
  </Router>
);

export default App;

// var navColor = {
//   color: '#aed6f1',
// };

const SiteName = styled.h1`
	margin: 2rem 0 0 1.5rem;
	font-size: xx-large;
	display: inline-block;
`;
const SiteDesc = styled.p`
	margin: 1.5rem 1.5rem 1.5rem 0;
	text-align: justify;
	> a:link {
		text-decoration: underline;
		font-weight: bold;
	}
	> a:visited {
		color: #8000ff;
	}
`;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

    import React, { Component } from 'react';
import styled from 'styled-components';

const About = function AboutPage() {
  return (
    <div>
      <section className="content" key={0}>
        <p>somthing or other complementary and links</p>
      </section>
    </div>
  );
};

export default About;

Upvotes: 1

Views: 276

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281834

The problem with your Route config is because not, all your Routes are inside the Switch

  <Switch>
    <Route exact path="/" component={MoviesList} />
    <Route path="/:id" component={MovieDetail} />
  </Switch>

  <Route exact path="/About" component={About} />

So what happens here is that when you go to /About, the route /:id matches and switch goes not further, but since the /about is outside of the switch, it is also matched and hence rendered. You would rather structure your Route like

 <Switch>
    <Route exact path="/" component={MoviesList} />
    <Route exact path="/About" component={About} />
    <Route path="/:id" component={MovieDetail} />
  </Switch>

Upvotes: 1

Related Questions