React Router：在不刷新页面的情况下渲染新视图

Question

你好！我要做的是重新设计我的 react-router，以便 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;

Home 组件的代码，其中包含 Home Page 中使用的 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:contact@somersetproductions.co" 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;

知道出了什么问题吗？任何帮助，将不胜感激！谢谢！

Answer 1

如果您使用的是 react router v4 或更高版本，应该是这样的。

import { Link } from 'react-router-dom';

<Link to='/about'>
    About
</Link>

为什么您在不需要的Home 组件中再次定义路由器。将路由配置保留在 App 组件中就足够了。希望这可以帮助。快乐编码！