[英]React router not rendering components due to its structure
我刚刚更改了我的 App 组件的结构,现在路由器没有渲染任何组件。 这是我的App.js
文件。 如果我删除MiddleContainer
组件,它会完美运行。 这些组件中的任何一个都没有路由器,因此嵌套路由没有问题。 我认为这是因为App.js
的结构,因为我读到 Switch 应该将 Route 作为其直接子级。
import "./App.css";
import React from "react";
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import HomePage from './components/HomePage';
import NavBar from './components/NavBar';
import Signin from './components/auth/Signin';
import Signup from './components/auth/Signup';
import PostQuestion from './components/Question/PostQuestion';
import PostDetails from './components/Question/PostDetails';
import MiddleContainer from './components/MiddleContainer';
import LeftContainer from './components/LeftContainer';
import RightContainer from './components/RightContainer';
import { Row } from 'react-bootstrap';
function App() {
return (
<Router>
<NavBar/>
<Row>
<LeftContainer />
<MiddleContainer>
<Switch>
<Route exact path="/" component={HomePage} />
{/* Auth Routes */}
<Route exact path="/auth/signup" component={Signup} />
<Route exact path="/auth/signin" component={Signin} />
{/* Post Routes */}
<Route exact path="/postquestion" component={PostQuestion} />
<Route exact path="/question/:id" component={PostDetails} />
</Switch>
</MiddleContainer>
<RightContainer />
</Row>
</Router>
);
}
export default App;
MiddleContainer.js
import React from 'react';
import { Col } from 'react-bootstrap';
const MiddleContainer = () => {
return (
<Col md={8}>
</Col>
)
}
export default MiddleContainer;
LeftContainer.js
import React from 'react';
import { Col } from 'react-bootstrap';
const LeftContainer = () => {
return (
<Col md={2}>
</Col>
)
}
export default LeftContainer;
RightContainer.js
import React from 'react';
import { Col } from 'react-bootstrap';
const RightContainer = () => {
return (
<Col md={2}>
</Col>
)
}
export default RightContainer;
您还需要选择在中间组件中显示子组件,如下所示:
import React from 'react';
import { Col } from 'react-bootstrap';
const MiddleContainer = (props) => {
return (
<Col md={8}>
{props.children}
</Col>
)
}
export default MiddleContainer;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.