react路由初探（2）

Z时代
2024-01-10
分类：综合

react

对着官网的例子反正是没有搞出来，所以搜了一大堆，最终搞出来了，记录一下

import React from 'react';
// 首先我们需要导入一些组件... （这个是中文网示例，按这个做，报一大堆错误，刚学习摸不着头脑） import { Router, Route, Link } from 'react-router'
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import logo from './logo.svg';
import './App.css';
class About extends React.Component {
  render() {
    return (<div>
      <h1>About</h1>
    </div>)
  }
}
class Inbox extends React.Component {
  render() {
    return (<div>
      <h1>Inbox</h1>
    </div>)
  }
}
class Home extends React.Component {
  render() {
    return (<div>
      <h1>Home</h1>
    </div>)
  }
}
// 使用react-router
class App extends React.Component {
  render() {
    return (<div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h3>用于构建用户界面的JavaScript库</h3>
      </header>
      <div>
        <Router>
          <div>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
              <li>
                <Link to="/inbox">Inbox</Link>
              </li>
            </ul>
            <div>
              <Route exact path="/" component={Home} />
              <Route path="/about" component={About} />
              <Route path="/inbox" component={Inbox} />
            </div>
          </div>
        </Router>
      </div>
    </div>)
  }
}
export default App;