javascript - 单击其他页面链接时，React Router 会隐藏 App 内容

Question

当我单击其他组件页面链接时，我想隐藏应用程序组件内容。

现在，当我点击关于我们的其他链接时，它会同时显示应用程序组件和关于我们的页面组件。但是一旦我点击关于我们的页面，我只想显示关于我们的内容。

此外，当我将 App 组件补丁定义为“/”时，应用程序会继续加载。

下面是代码

应用程序.js

import React, { Component } from "react";
import Navigation from "./components/Navigation";

import data from "./data";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      // data: false
    };
  }

  render() {
    return (
      <div className="container">
        <Navigation />
        {data.map((link) => (
          <div className="card mb-3" key={link.Title}>
            <div className="row no-gutters">
              <div className="col-md-5">
                <img
                  src={require("./images/" + link.Img)}
                  className="card-img"
                  alt=""
                />
              </div>
              <div className="col-md-7">
                <div className="card-body">
                  <h5 className="card-title">{link.Title}</h5>
                  <p className="card-text">{link.Desc.halfDesc}</p>
                  <p className="card-text">
                    <small className="text-muted">{link.date}</small>
                  </p>
                  <button type="button" className="btn btn-dark float-right">
                    Read More
                  </button>
                </div>
              </div>
            </div>
            <FullDescription />
          </div>
        ))}
      </div>
    );
  }
}

const FullDescription = (props) => (
  <div className="modalbox">
    <p>fsdf</p>
  </div>
);

export default App;

Navigation.Js一切正常，只有当我点击其他页面时，应用主页内容才会显示我不想要的内容

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

import Api from "./Api";
import News from "./News";
import Website from "./Website";
class Navigation extends Component {
  render() {
    return (
      <Router>
        <ul className="nav justify-content-center mb-4 navigation">
          <li className="nav-item">
            <Link className="nav-link" to="/Api">
              Api
            </Link>
          </li>
          <li className="nav-item">
            <Link className="nav-link" to="/News">
              News
            </Link>
          </li>
          <li className="nav-item">
            <Link className="nav-link" to="/Website">
              Website
            </Link>
          </li>
        </ul>

        <Switch>
          <Route exact path="/Api" component={Api}></Route>
          <Route exact path="/News" component={News}></Route>
          <Route exact path="/Website" component={Website}></Route>
        </Switch>
      </Router>
    );
  }
}
export default Navigation;

标签： javascriptreactjsreact-router

Answer 1

为此，您需要将 app.js 的内容放在另一个组件中，因为现在它没有在转到其他页面时隐藏自身的路由。因此，您需要像对待其他组件（Api.js、News.js）等一样对待组件。

新应用组件.js

    import React, { Component } from "react";
import { Link } from "react-router-dom";

class Navigation extends Component {
    render() {
        return (
            <ul className="nav justify-content-center mb-4 navigation">
                <li className="nav-item">
                    <Link className="nav-link" to="/Api">
                        Api
                    </Link>
                </li>
                <li className="nav-item">
                    <Link className="nav-link" to="/News">
                        News
                    </Link>
                </li>
                <li className="nav-item">
                    <Link className="nav-link" to="/Website">
                        Website
                    </Link>
                </li>
            </ul>
        );
    }
}
export default Navigation;

应用程序.js

import React, { Component } from "react";
import Navigation from "./components/Navigation";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import NewAppComponent from "./NewAppComponent";
import Api from "./Api";
import News from "./News";
import Website from "./Website";
class App extends Component {
    render() {
        return (
            <div className="container">
                <Router>
                    <Navigation />

                    <Switch>
                        <Route exact path="/" component={NewAppComponent}></Route>
                        <Route path="/Api" component={Api}></Route>
                        <Route path="/News" component={News}></Route>
                        <Route path="/Website" component={Website}></Route>
                    </Switch>
                </Router>
            </div>
        );
    }
}


export default App;

新应用组件.js

// NewAppComponent.js

import React, { Component } from "react";
import data from "./data";

class NewAppComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            // data: false
        };
    }

    render() {
        return (
            <div className="container">
                {data.map((link) => (
                    <div className="card mb-3" key={link.Title}>
                        <div className="row no-gutters">
                            <div className="col-md-5">
                                <img src={require("./images/" + link.Img)} className="card-img" alt="" />
                            </div>
                            <div className="col-md-7">
                                <div className="card-body">
                                    <h5 className="card-title">{link.Title}</h5>
                                    <p className="card-text">{link.Desc.halfDesc}</p>
                                    <p className="card-text">
                                        <small className="text-muted">{link.date}</small>
                                    </p>
                                    <button type="button" className="btn btn-dark float-right">
                                        Read More
                                    </button>
                                </div>
                            </div>
                        </div>
                        <FullDescription />
                    </div>
                ))}
            </div>
        );
    }
}

const FullDescription = (props) => (
    <div className="modalbox">
        <p>fsdf</p>
    </div>
);

export default NewAppComponent;