React Router Проблема: React отрисовывает два компонента на одной странице - PullRequest
Новая
       41

React Router Проблема: React отрисовывает два компонента на одной странице

1 голос
/ 08 октября 2019

У меня проблемы с моим проектом, на самом деле я пытаюсь обработать страницу 404, когда пользователь вводит разные URL-адреса вне маршрутов в моем приложении, но, используя мои знания React и response-router, нужно только поставитьпоследний маршрут не имеет пути и точный путь , обернутый коммутатором от реактивного маршрутизатора, но не работает должным образом, домашняя страница отображает Home и NotFound компонентов одновременно.

Я пытался удалить Контейнерный компонент внутри Маршрутизатора, но из-за этого исчезают все компоненты после MenuBar.

Я пыталсяпоставить путь = '*' в последнем маршруте, имеющем 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;

Мне нужно только отменитьr Домашний компонент, когда пользователь посещает «/», но странно, как реагирующий маршрутизатор отображает два компонента одновременно, пожалуйста, дайте мне знать, если вы обнаружите, где я ошибаюсь, или решение для этого, я буду публиковать обновления, еслиЯ найду решение или что-то еще.

Заранее спасибо, товарищи!.

1 Ответ

1 голос
/ 08 октября 2019

Благодаря @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>
);

С наилучшими пожеланиями!

...