[英]How do I render multiple React classes into one root node?
我正在使用 React 创建一个网站。 我在构建后意识到,它只显示和组件。
这就是我的 App.js 的样子:
import React, { Component } from 'react';
import './App.css';
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
import Home from './components/Home/Home';
import About from './components/About/About';
import Team from './components/Team/Team';
import Projects from './components/Projects/Projects';
import Contact from './components/Contact/Contact';
import Documents from './components/Documents/Documents';
import FAQ from './components/FAQ/FAQ';
import { Route } from 'react-router-dom';
class App extends Component {
render() {
return (
<div>
<Header />
<Route exact={true} path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/projects" component={Projects} />
<Route path="/team" component={Team} />
<Route path="/contact" component={Contact} />
<Route path="/documents" component={Documents} />
<Footer />
</div>
);
}
}
export default App;
我想知道如何渲染所有其他类,以便在单击 header 链接时显示为自己的页面,就像在普通网站中一样
您可以使用 Link 创建指向这些页面的链接:
import { Link } from 'react-router-dom';
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/projects">Projects</Link>
...
我这样做的方法是拥有一个包含所有链接的 NavBar 组件和一个包含所有路由的 AppRoutes 组件,如下所示:
const App = () => {
return (
<BrowserRouter>
<NavBar />
<AppRoutes />
</BrowserRouter>
);
}
我终于找到了解决方案:
import React, { Component } from 'react';
import './App.css';
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
import Home from './components/Home/Home';
import About from './components/About/About';
import Team from './components/Team/Team';
import Projects from './components/Projects/Projects';
import Contact from './components/Contact/Contact';
import Documents from './components/Documents/Documents';
import FAQ from './components/FAQ/FAQ';
import { HashRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom';
function App() {
return (
<Router>
<div className="App">
<Header />
<Switch>
<Route exact={true} path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/projects" component={Projects} />
<Route exact path="/team" component={Team} />
<Route exact path="/contact" component={Contact} />
<Route exact path="/documents" component={Documents} />
</Switch>
<Footer />
</div>
</Router>
);
}
export default App;
我要做的就是将路由嵌套在 Route 和 Switch 中,然后将导入更改为 HashRouter,这就是组件未加载的原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.