Question

根据我的理解，一旦您实现了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'),
);

App.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>
    </>
);

LeftMenu.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>
    );
};

Answer 1

首先，此处的LeftMenu组件和App组件之间没有链接。您的leftMenu将永远不会被渲染，并且您的应用程序将始终渲染它包含的所有内容（首页，发票，ACT，外部...）。

第二，以下声明：

一旦实现了React Router，除非路由路径与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/

Answer 2

您需要将App包装在Route组件（https://reacttraining.com/react-router/web/api/Route）中：

import { BrowserRouter as Router, Route } from 'react-router-dom'

ReactDOM.render(
    <Router>
        <Route path='/' component={App} />
    </Router>
    document.getElementById('root'),
);

在不应该的时候反应路由器显示组件

2 个答案: