您好!我想要做的是重做我的反應路由器,以便NavLink在點擊時呈現一個全新的頁面,而不是渲染在div底部,如上面的gif所示。
這是我的主要App.js成分含量:
import React, { Component } from 'react';
import './App.css';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Home from './Home.js';
import About from './About.js';
import September from './September.js';
import Trilogy from './Trilogy.js';
class App extends Component {
render() {
return (
<Router>
<div>
<Switch>
<Route exact path = '/' component={Home} />
<Route path = '/about/' component = {About} />
<Route path = '/september/' component = {September} />
<Route exact path = '/september/trilogy/' component = {Trilogy} />
</Switch>
</div>
</Router>
);
}
}
export default App;
的主頁組件的代碼,其中認爲在家庭中的頁面使用的NavBar。
import React, { Component } from 'react';
import {BrowserRouter as Router, NavLink, Switch, Route} from 'react-router-dom';
import logo from './logo.png';
import About from './About.js';
import September from './September.js';
import Trilogy from './Trilogy.js';
let NavBar =() => {
return (
<div>
<h2 className = "container2"><NavLink to = '/about/'>About</NavLink> </h2>
<img src = {logo} className = "somersetLogo" alt = "somersetLogo" />
<h2 className = "container" ><a href="mailto:[email protected]" className = "mailto">Contact</a></h2>
</div>
)
}
class Home extends Component {
render(){
return (
<Router>
<div>
<NavBar />
<Switch>
<Route exact path = '/about/' component = {About} />
</Switch>
</div>
</Router>
)
}
}
export default Home;
任何想法出了什麼問題?任何幫助,將不勝感激!謝謝!
你的反應路由器版本是什麼? –