React BrowserRouter 将两个页面混合在一起

Question

遵循教程并尝试在此基础上进行构建；我想向应用程序添加一个新页面。发生的事情是，当我从 "MovieList" 导航到 "MovieDetail.js" 然后导航到 "About" 时，我拥有来自 [=] 的所有 header 33=]，来自该视图的 MovieDetail 信息，和关于页面上的信息。

我不应该将“关于”页面与 header 以外的任何内容混淆。我在这里创建了什么可怕的路由怪物？

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;

Answer 1

你的路由配置问题是因为不是，你所有的 Routes 都在 Switch

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

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

所以这里发生的是，当你去 /About 时，路由 /:id 匹配并且开关不再继续，但是由于 /about 在开关之外，它也匹配并因此呈现。你宁愿像

这样构建你的路线

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

React BrowserRouter 将两个页面混合在一起

React BrowserRouter mashing two pages together

jsx

reactjs

react-router-v4