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

问题描述 投票:0回答:1

我的项目有问题,实际上,当用户在我的应用程序中的Routes之外输入不同的URL时,我实际上是在尝试处理404页面,但是使用我对React和react-router的了解,只需将最后一条路由没有路径,而exact path由react-router的Switch包裹,但效果不佳,主页正在同时渲染HomeNotFound组件时间。

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

我试图在最后一个Route中将path ='*'放入在同一页面中呈现2个组件的位置。

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

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

感谢预先的伙伴!。

javascript reactjs react-router react-apollo apollo-client
1个回答
0
投票

由于@skyboyer和@Hugo Dozois,该问题已修复,这是更新的App.js,以供将来参考:

© www.soinside.com 2019 - 2024. All rights reserved.