React Router 问题：React 在同一页面中渲染两个组件

Posted 2023-02-23

【中文标题】React Router 问题：React 在同一页面中渲染两个组件

【英文标题】：React Router Issue: React render two components in the same page

【发布时间】：2020-02-05 06:09:58

【问题描述】：

我的项目有问题，实际上，当用户在我的应用程序的路由之外输入不同的 url 时，我正在尝试处理 404 页面，但使用我对 React 和 react-router 的了解只需要放置最后一条路由没有路径，并且 exact path 由 react-router 的 Switch 包裹但效果不佳，主页正在呈现 Home和 NotFound 组件。

我试图删除路由器内的 Container 组件，但这使得 MenuBar 之后的所有组件都消失了。

我尝试将 path='*' 放在最后一个 Route 中，在同一页面中呈现 2 个组件。

我在说什么的图片： 2 components at same time

我的项目有 3 个主要文件：

1.- 索引.js：

import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import ApolloProvider from './ApolloProvider';

import 'semantic-ui-css/semantic.min.css';
import 'animate.css/animate.min.css';
import './App.css';

ReactDOM.render(ApolloProvider, document.getElementById('root'));

serviceWorker.unregister();

2.- ApolloProvider.js（使用 Apollo 和 GraphQL）：

import React from 'react';
import App from './App';
import ApolloClient from 'apollo-client';
import  InMemoryCache  from 'apollo-cache-inmemory';
import  createHttpLink  from 'apollo-link-http';
import  ApolloProvider  from '@apollo/react-hooks';

const httpLink = createHttpLink(
    uri: 'http://localhost:5000/graphql'
);

const client = new ApolloClient(
    link: httpLink,
    cache: new InMemoryCache()
);

export default (
    <ApolloProvider client=client>
        <App />
    </ApolloProvider>
);

3.- 最后是 App.js：

import React from 'react';
import  BrowserRouter as Router, Route, Switch  from 'react-router-dom';
import  Container  from 'semantic-ui-react';

import MenuBar from './Components/MenuBar';
import Home from './Pages/Home';
import Login from './Pages/Login';
import Register from './Pages/Register';
import NotFound from './Pages/404';

const App = props => (
    <Router>
        <Switch>
            <Container>
                <MenuBar />
                <Route exact path='/' component=Home />
                <Route exact path='/login' component=Login />
                <Route exact path='/register' component=Register />
                <Route path='*' component=NotFound />
            </Container>
        </Switch>
    </Router>
);

export default App;

我只需要在用户访问“/”时渲染 Home 组件，但是 react-router 如何同时渲染两个组件很奇怪，如果您发现我的错误或解决方案，请告诉我，如果我找到解决方案或其他什么，我会发布更新。

先谢谢各位朋友了！

【问题讨论】：

Home 和 NotFound 是否同时渲染？

开关需要围绕路由组件，而不是围绕容器。所以层次结构是Router => Container => [MenuBar, Switch => Route[]]

是的@skyboyer，如果您看到NotFound 组件的附件图像，它与home/login/register 组件同时呈现。

我没有看到附加的图像，猜测移动版本不渲染图像。正如 Hugo Dozois 所说，订购很重要。 Switch 只影响直系子女，无论是 Route 还是其他任何东西（并且只有一个直系子女 - Container）

完美！一切正常，我对这个简单的层次结构问题要发疯了，谢谢！！！

【参考方案1】：

感谢@skyboyer 和@Hugo Dozois，问题已得到解决，这是更新后的App.js 以供将来参考：

const App = props => (
    <Router>
        <Container>
            <MenuBar />
            <Switch>
                <Route exact path='/' component=Home />
                <Route exact path='/login' component=Login />
                <Route exact path='/register' component=Register />
                <Route path='*' component=NotFound />
            </Switch>
        </Container>
    </Router>
);

最好的问候！