我的专案有问题,实际上是当使用者在应用程式中的Routes之外输入其他网址时,我试图处理404页面,但使用我对React和react-router的了解,只需要输入最后一条路由没有任何路径和由React路由器的Switch包裹的确切路径,但效果不佳,主页同时渲染了Home和NotFound组件。
我试图删除路由器内部的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如何同时渲染两个组件,请让我知道如果您发现我错了或对此有解决方案,我会正在发布更新,如果我找到解决方案或其他。
在此先感谢队友!
感谢@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] 删除。
我来说两句