React Router 问题:React 在同一页面中呈现两个组件
React Router Issue: React render two components in the same page
我的项目有问题,实际上我正在尝试处理一个 404 页面,当用户在我的应用程序的路由之外输入不同的 url 时,但是使用我对 React 和 React 的了解-router 只需要把最后一条路由没有路径和 exact path 包裹在来自 react-router 的 Switch 但不能正常工作,home页面同时呈现 Home 和 NotFound 组件。
我试图删除 Router 中的 Container 组件,但这使得 MenuBar 之后的所有组件都消失了。
我尝试将 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(使用带有 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';
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>
);
此致!
我的项目有问题,实际上我正在尝试处理一个 404 页面,当用户在我的应用程序的路由之外输入不同的 url 时,但是使用我对 React 和 React 的了解-router 只需要把最后一条路由没有路径和 exact path 包裹在来自 react-router 的 Switch 但不能正常工作,home页面同时呈现 Home 和 NotFound 组件。
我试图删除 Router 中的 Container 组件,但这使得 MenuBar 之后的所有组件都消失了。
我尝试将 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(使用带有 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';
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>
);
此致!