即使使用了exact Routing，React Routing 仍然显示根组件答案

【问题标题】：React Routing still showing root component even after using exact即使使用了exact Routing，React Routing 仍然显示根组件
【发布时间】：2018-11-02 19:17:45
【问题描述】：

我还是 React 的新手。所以在这里我用两条路径渲染根组件：Home 和 About 位于功能组件中：分别是 home.js 和 about.js。然而，即使在使用 exact 属性和之后，根组件仍会继续在上面渲染。当我重定向到任何提到的路线时，我仍然无法弄清楚如何不呈现根组件？

这是现场演示：https://codesandbox.io/s/vmz6zwq0k7

【问题讨论】：

根组件不在路由内，所以它总是渲染。
那么您的期望是什么？
@worc 我尝试将根组件嵌套在单独的中，但是当路由更改时它仍然会呈现。
@Think-Twice 我已经编辑了这个问题。基本上我不希望在路由更改时加载根组件！感谢您的信息

标签： reactjs react-router-dom react-16

【解决方案1】：

Route component 在 URL 匹配时充当您要呈现的组件的“占位符”。它上面的一切（父母和兄弟姐妹）都不会受到影响。

鉴于此代码示例：

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Link to="/home"> Home </Link>{" "}
          |
          <Link to="/about"> About Us </Link>{" "}
          <div>
            <Route exact path="/home" component={Home} />
            <Route exact path="/about" component={About} />
          </div>
        </div>
      </BrowserRouter>
    );
  }

这行代码：

<Route exact path="/home" component={Home} />

只是Home 组件的“占位符”。只有当path 匹配"/home" 时，它才会呈现任何内容。

当path 匹配时，Route 组件将渲染传递的组件，在本例中为Home 组件。

它不会影响整个应用程序树，这是有充分理由的！
如果整个应用程序将被重新渲染并替换为 Home 组件，您将失去导航链接。

【讨论】：

【解决方案2】：

我在这里查看 react-routing 入门部分时遇到了同样的问题。 https://reactrouter.com/web/guides/quick-start

我将 Router/BrowserRouter 放在了我的 App 组件中。而是像这样将路由器放在 index.js 文件中

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';
    import { BrowserRouter } from "react-router-dom";
    
    ReactDOM.render(
      <React.StrictMode>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </React.StrictMode>,
      document.getElementById('root')
    );

那么你的应用组件可以看起来像这样，如果匹配了 about 或 users，则不会匹配根路由。

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

export default function App() {
  return (
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

【讨论】：