Question

按照教程并尝试构建它;我想在应用中添加新页面。当我从＆＃34; MovieList＆＃34;导航时，会发生什么？ to＆＃34; MovieDetail.js＆＃34; 然后到＆＃34;关于＆＃34;，我有来自App.js的所有标题，来自该视图的MovieDetail信息，和关于关于页面的信息。

我不应该将About页面与标题混合起来。我在这里创造了一个可怕的路由怪物？

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

＆＃13;

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;
	}
`;

＆＃13;

<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>

＆＃13;

    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将两个页面混合在一起

1 个答案: