在 React 中切换页面

Question

我是一个完全的 React 新手，并且有一个（可能）愚蠢的问题。如何在 React.js 中的不同 javascript 页面之间切换？

我的一个页面上有一个按钮，我想链接到另一个 javascript 页面。我了解路由器，但这不符合我的需要。

谢谢你，马克·布鲁克特

Answer 1

这是基于react-router文档中的示例。React Router 可能是最简单的客户端路由解决方案。快乐编码。

请参阅 Stackblitz 上的完整示例。

import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Nav = () => (
  <div>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
    </ul>
  </div>
);

const HomePage = () => <h1>Home Page</h1>;
const AboutPage = () => <h1>About Page</h1>;

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <Router>

        {/* Router component can have only 1 child. We'll use a simple
          div element for this example. */}
        <div>
          <Nav />
          <Route exact path="/" component={HomePage} />
          <Route path="/about" component={AboutPage} />
        </div>
      </Router>
    );
  }
}

render(<App />, document.getElementById('root'));