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

Posted 2023-02-21

【中文标题】使用 react-router 链接到其他组件

【英文标题】：Linking to other components with react-router

【发布时间】：2019-01-21 18:17:09

【问题描述】：

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

我一直在关注两个 tuts：

https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf https://www.youtube.com/watch?v=1iAG6h9ff5s&index=6&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b

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

这是我的代码：

Components 文件夹包含 About.js、Footer.js 和 pages 文件夹包含 App.js、Index.js

关于.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();

有谁知道问题出在哪里，以及我如何从本质上“隐藏”索引/主页主登录页面并改为显示关于内容？

谢谢！

【问题讨论】：

如何渲染登陆页面？您没有在您的index.js 中使用您的About、Main 和Header 组件。您只使用了您的App，它使用了其他组件，例如Navbar、Banner等。

@devserkan 还有一个公用文件夹，其中包含一个 index.html 文件，我将所有内容附加到根目录。

实际附件在HashRouter内的index.js中。

我不知道你是怎么做到的，但你为什么不在你的应用程序中使用这个逻辑呢？带有一些组件的登录页面，然后带有 Link 的只是转到相关页面。

@devserkan 所以就像一个标准的 HTML 页面，其中混合了一些 React 组件，其中有标准链接 ?

【参考方案1】：

您可以按照以下方式进行所需的简单设置：

import React from "react";
import ReactDOM from "react-dom";
import  BrowserRouter, Route, Switch, Link  from "react-router-dom";

const Landing = () => (
  <div>
    <h3>This is landing page with Foo and Bar</h3>
    <Foo />
    <Bar />
  </div>
)
const Foo = () => <div>This is component Foo.</div>;
const Bar = () => <div>This is component Bar.</div>;
const About = () => <div>This is component About.</div>;
const Header = () => (
  <div style=height: "30px", background: "gray">Header | 
  <Link to="/about"> Go to about</Link>
  </div>
);
const Footer = () => (
  <div style= height: "30px", background: "gray" >Footer |
  <Link to="/about"> Go to about</Link>
  </div>
);

const NotFound = () => <div>Not found</div>

class App extends React.Component 
  render() 
    return (
      <div>
      <BrowserRouter>
        <div>
            <Header />
            <Switch>
              <Route exact path="/" component=Landing />
              <Route path="/about" component=About />
              <Route component=NotFound />
            </Switch>
            <Footer />
        </div>
      </BrowserRouter>
      </div>
    );
  


ReactDOM.render(<App />, document.getElementById("root"));