React Router问题:React在同一页面上渲染两个组件

乔什·罗德里格斯(JoshRodríguez)

我的专案有问题,实际上是当使用者在应用程式中的Routes之外输入其他网址时,我试图处理404页面,但使用我对React和react-router的了解,只需要输入最后一条路由没有任何路径和由React路由器Switch包裹的确切路径但效果不佳,主页同时渲染了HomeNotFound组件。

我试图删除路由器内部的Container组件,但这会使MenuBar消失后的所有组件。

我试图将path ='*'放在最后一个Route中,在同一页面中渲染了2个组件。

我正在谈论的图片:同时包含2个组件

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

1.- Index.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如何同时渲染两个组件,请让我知道如果您发现我错了或对此有解决方案,我会正在发布更新,如果我找到解决方案或其他。

在此先感谢队友!

乔什·罗德里格斯(JoshRodríguez)

感谢@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>
);

最好的祝福!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用react-hook-form在同一页面上添加两个表单

来自分类Dev

React Router:为什么嵌套路由使 React 在同一页面上呈现

来自分类Dev

如何在React JS中停留在同一页面上并呈现不同的组件

来自分类Dev

是否可以限制组件样式而不是内联样式,以防止同一页面上的多个React应用覆盖?

来自分类Dev

React router v5.0.1 - 在同一路由上渲染两个组件

来自分类Dev

React:如何在同一页面中两次使用相同的组件,但只为一次加载一个脚本标签

来自分类Dev

React-router-dom:在一个路由下渲染两个组件

来自分类Dev

如何通过在React的同一页面上显示结果来替换表单

来自分类Dev

在同一组件中映射和渲染两个不同的数组-React

来自分类Dev

React:如何链接到其他组件(在同一页面中打开)

来自分类Dev

React Router和Links全部都指向同一页面?

来自分类Dev

如果更改幻灯片项目,则React-slick滑块会停留在同一页面上

来自分类Dev

同一页面上的两个Angular2组件

来自分类Dev

React Native Expo App-如何在同一页面中导出多个组件

来自分类Dev

在React中渲染两个彼此相邻的组件

来自分类Dev

React.js不会区分同一个类的两个组件

来自分类Dev

React Router 组件渲染两次

来自分类Dev

在同一页面上为两个iframe分配onload功能时遇到问题?

来自分类Dev

使用Azure Media Player加载两个视频(在同一页面上)时遇到问题

来自分类Dev

使用自定义jQuery在同一页面上有两个轮播的问题

来自分类Dev

如何使用Link(react-router)将道具从一页传递到类组件

来自分类Dev

同一页面上的2个Google图表出现渲染问题

来自分类Dev

同一页面上的2个Google图表出现渲染问题

来自分类Dev

当同一页面上的2个表单验证失败时,将出现渲染问题

来自分类Dev

如何为同一页面上的两个表单定义唯一的validateForm?

来自分类Dev

如何在同一页面的多个位置使用同一React应用程序?

来自分类Dev

如何在同一页面上呈现两个菜单?

来自分类Dev

是否可以在同一页面上运行两个不同版本的ReactJS?

来自分类Dev

动态填充同一页面上其他两个选择的选择

Related 相关文章

  1. 1

    使用react-hook-form在同一页面上添加两个表单

  2. 2

    React Router:为什么嵌套路由使 React 在同一页面上呈现

  3. 3

    如何在React JS中停留在同一页面上并呈现不同的组件

  4. 4

    是否可以限制组件样式而不是内联样式,以防止同一页面上的多个React应用覆盖?

  5. 5

    React router v5.0.1 - 在同一路由上渲染两个组件

  6. 6

    React:如何在同一页面中两次使用相同的组件,但只为一次加载一个脚本标签

  7. 7

    React-router-dom:在一个路由下渲染两个组件

  8. 8

    如何通过在React的同一页面上显示结果来替换表单

  9. 9

    在同一组件中映射和渲染两个不同的数组-React

  10. 10

    React:如何链接到其他组件(在同一页面中打开)

  11. 11

    React Router和Links全部都指向同一页面?

  12. 12

    如果更改幻灯片项目,则React-slick滑块会停留在同一页面上

  13. 13

    同一页面上的两个Angular2组件

  14. 14

    React Native Expo App-如何在同一页面中导出多个组件

  15. 15

    在React中渲染两个彼此相邻的组件

  16. 16

    React.js不会区分同一个类的两个组件

  17. 17

    React Router 组件渲染两次

  18. 18

    在同一页面上为两个iframe分配onload功能时遇到问题?

  19. 19

    使用Azure Media Player加载两个视频(在同一页面上)时遇到问题

  20. 20

    使用自定义jQuery在同一页面上有两个轮播的问题

  21. 21

    如何使用Link(react-router)将道具从一页传递到类组件

  22. 22

    同一页面上的2个Google图表出现渲染问题

  23. 23

    同一页面上的2个Google图表出现渲染问题

  24. 24

    当同一页面上的2个表单验证失败时,将出现渲染问题

  25. 25

    如何为同一页面上的两个表单定义唯一的validateForm?

  26. 26

    如何在同一页面的多个位置使用同一React应用程序?

  27. 27

    如何在同一页面上呈现两个菜单?

  28. 28

    是否可以在同一页面上运行两个不同版本的ReactJS?

  29. 29

    动态填充同一页面上其他两个选择的选择

热门标签

归档