javascript 反应路由器

Posted 2021-05-03

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

import React, { Component } from "react";
import { Route, Switch, NavLink } from "react-router-dom";
import Contact from "./Contact";
import About from "./About";
import Dog from "./Dog";
import "./App.css";

const Hater = () => <h1>I ABSOLUTELY HATE DOGS!</h1>;

export default class App extends Component {
  render() {
    return (
      <div className="App">
        <nav className="App-nav">
          <NavLink exact activeClassName="active-link" to="/">
            About
          </NavLink>
          <NavLink exact activeClassName="active-link" to="/dog">
            Dog
          </NavLink>
          <NavLink exact activeClassName="active-link" to="/contact">
            Contact
          </NavLink>
          <NavLink activeClassName="active-link" to="/dog/r">
            Dog(r)
          </NavLink>
          <NavLink activeClassName="active-link" to="/dog/c">
            Dog(c)
          </NavLink>
        </nav>
        <Switch>
          <Route exact path="/" component={About} />
          <Route exact path="/contact" component={Contact} />
          <Route exact path="/dog" component={Dog} />
          <Route exact path="/dog/hater" component={Hater} />

          <Route exact path="/dog/c" component={() => <Dog name="Muffins" />} />
          <Route exact path="/dog/r" render={() => <Dog name="Biscuits" />} />
        </Switch>
      </div>
    );
  }
}