Question

我对React非常陌生，我正在尝试使用react-router导航到新组件。以前，该网站是静态HTML和CSS，因此很容易在html文件之间导航，但是，由于进行了切换并使用React更新了网站，我有点困惑。

我一直关注以下两个案例：

现在，我有一个简单的关于页面组件，单击页面页脚上的“关于”链接后，我将尝试呈现该组件。因此，当前发生的情况是，当我单击页脚上的“关于”链接时，它从localhost:3000/#/react到localhost:3000/#/about，但是页面上没有任何变化。它仍在显示索引/主页，但我希望它显示about内容。

这是我的代码：

Components 文件夹包含 About.js ， Footer.js 和页面文件夹包含 App.js ， Index.js

About.js：

import React from 'react';

const About = function() {
  return (
    <div>
      <h1 className="container-headers">- Our Mission and Vision -</h1>
      <p>
        Blah, blah.. this going to work?
      </p>
    </div>
  )
}

export default About;

Footer.js

import React from 'react';
import Logo from '../img/footer-logo.png';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { Link } from 'react-router-dom';


const Footer = function() {
  return (
    <div className="container-fluid twenty-padding-top">
      <div className="row">

        <div className="col-lg-4 col-sm-12 sixty-bottom-margin">
          <ul className="contact">
            <span className="margin-top-twentypx">Menu</span>

            <li>
              <Link to="about">About</Link>
            </li>

            <li>
              <a href="about.html">Provider Login</a>
            </li>

            <li>
              <a href="#">Blog</a>
            </li>
          </ul>
        </div>

      </div>
    </div>
  )
}

export default Footer;

App.js

import React, { Component } from 'react';
import './App.css';
import Services from './components/Services';
import Navbar from './components/Navbar';
import HowItWorks from './components/HowItWorks';
import BitIcons from './components/BitIcons';
import Footer from './components/Footer';
import Banner from './components/Banner';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar />
        <Banner />
        <Services />
        <HowItWorks />
        <BitIcons />
        <Footer />
      </div>
    );
  }
}

export default App;

最后， index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import registerServiceWorker from './registerServiceWorker';

import { Switch, HashRouter, Route, Link } from 'react-router-dom';

const app = document.getElementById('root');

const About = () => (
  <Switch>
    <Route exact path='/about' component={About} />
  </Switch>
)

const Main = () => (
  <Main>
    <Switch>
      <Route exact path='/about' component={About} />
    </Switch>
  </Main>
)

const Header = () => (
  <header>
    <nav>
      <ul>
        <li><Link to='/about'>About</Link></li>
      </ul>
    </nav>
  </header>
)

ReactDOM.render(
  <HashRouter>
    <App />
  </HashRouter>,
app);

registerServiceWorker();

有人知道问题出在哪里吗，我怎么能基本上“隐藏”索引/主页的主要目标页面并显示about内容呢？

谢谢！

Answer 1

以下是您可以执行所需的简单设置的方法：

<option>

使用react-router链接到其他组件

1 个答案: