我的項目有問題,實際上當用戶在我的應用程序中的路由之外輸入不同的 url 時,我試圖處理 404 頁面,但是使用我對 React 和 react-router 的知識只需要放置最后一條路由沒有路徑和由來自 react-router的Switch包裹的確切路徑,但效果不佳,主頁同時呈現(xiàn)Home和NotFound組件。我試圖刪除路由器內(nèi)的 Container 組件,但這使得 MenuBar 之后的所有組件都消失了。我試圖將 path='*' 放在最后一個 Route 中有 2 個組件呈現(xiàn)在同一頁面中。我的項目有 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(使用帶有GraphQL的Apollo):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';export default App;我只需要在用戶訪問“/”時渲染 Home 組件,但是 react-router 如何同時渲染兩個組件很奇怪,如果您發(fā)現(xiàn)我錯在哪里或解決方案,請告訴我,我會如果我找到解決方案或其他什么,正在發(fā)布更新。
React Router 問題:React 在同一頁面中渲染兩個組件
ITMISS
2021-11-12 16:02:26