react router 学习过程中用组件切换代替新建项目

https://reactrouter.com/

npx create-react-app demo

yarn add react-router-dom

 

这样想试试新功能的话只需要新建组件即可, 不需要新建项目

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import A1 from "./components/A1";
const routes = [{ path: "/A1", component: A1 }];
function App() {
  return (
    <div className="App">
      <Router>
        {routes.map(({ path }) => (
          <Link key={path} to={path}>
            {path}
          </Link>
        ))}
        <Switch>
          {routes.map(({ path, component }) => (
            <Route exact key={path} component={component} path={path}></Route>
          ))}
        </Switch>
      </Router>
    </div>
  );
}

export default App;

 

来源：oschina

链接：https://my.oschina.net/ahaoboy/blog/4430868