时间戳

首页 > 解决方案 > 反应路由器显示组件时不应该

reactjs - 反应路由器显示组件时不应该

问题描述

根据我的理解，一旦你实现了 React Router，你的网站不应该显示任何组件，除非 Route 路径与 URL 匹配。但是，我的代码并没有那样做。我已经实现了一些东西，但发票组件仍然想要呈现，即使 URL 是“/”。我该如何解决这个问题？

已更新以防止组件呈现并显示 LeftMenu 的更多代码

我仍然对是否需要针对我的情况使用 React Router 感到困惑。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './pages/App';
import { BrowserRouter as Router } from 'react-router-dom';

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

应用程序.js

return (
    <>
        <GlobalStyle />
        <TopMenu
            setDisplay={setDisplay}
            display={display}
            openNav={openNav}
            closeNav={closeNav}
        />
        <Wrapper>
            <LeftMenu changeSection={changeSection} setSection={setSection} />
            <MainStyle>
                <BreadCrumbs
                    changeSection={changeSection}
                    number={number}
                    month={month}
                    breadCrumbs={breadCrumbs}
                    setSection={setSection}
                />
                <Portal>
                    {section === 'home' && <Home />}
                    {section === 'invoice' && (
                        <Invoice>
                            <Invoices
                                invoices={invoices}
                                updateNumber={updateNumber}
                                updateMonth={updateMonth}
                                number={number}
                                month={month}
                                download={download}
                            />
                        </Invoice>
                    )}
                    {section === 'act' && <ACT />}
                    {section === 'external' && <External />}
                </Portal>
            </MainStyle>
        </Wrapper>
    </>
);

左菜单.js

const LeftMenu = ({ changeSection }) => {
    return (
        <NavWindow>
            <ul>
                <li>
                    <Link to='/Employer Invoices'>Employer Invoices</Link>
                </li>
                <li>
                    <Link to='/ACT'>Enroll Employee</Link>
                </li>
                <li>
                    <Link to='/ACT'>Terminate Employee</Link>
                </li>
                <li>
                    <Link to='/ACT'>Employee Changes</Link>
                </li>
            </ul>
            <Switch>
                <Route exact path='/' component={Home} />
                <Route path='/Employer Invoices' component={Invoices} />
                <Route path='/Employer Invoices/:invoiceId' component={Invoices} />
                <Route path='/Enroll Employee' component={ACT} />
                <Route path='/Terminate Employee' component={ACT} />
                <Route path='/Employee Changes' component={ACT} />
            </Switch>
        </NavWindow>
    );
};

标签： reactjsreact-router

解决方案

首先，您的 LeftMenu 组件和您的 App 组件之间没有链接。您的 leftMenu 将永远不会被渲染，您的应用程序将始终渲染它包含的所有内容（Home、Invoice、ACT、External...）。

二、以下断言：

实现 React Router 后，除非 Route 路径与 URL 匹配，否则您的网站不应显示任何组件

是假的。在您的上下文中，如果您从中更改 index.js 代码：

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

对此：

ReactDOM.render(
  <Router>
    <LeftMenu />
  </Router>,
  document.getElementById('root'),
);

我想它会接近你想要的。它会始终呈现您的 NavWindow。里面的链接会一直渲染，ul 标签上方会渲染路由匹配当前路径的组件。

这是你的代码和一些修改以使其工作，我让你发现差异。如果您需要更多解释，请不要犹豫。

https://jsfiddle.net/6atxpr15/

推荐阅读