import { Route, Switch, Link } from "react-router-dom";
import Home from "./pages/Home";
import List from "./pages/List";
import About from "./pages/About";
import Detail from "./pages/Detail";
function App() {
  return (
    <div className="App">
      <Link to="/">【首页】</Link>
      <Link to="/list">【列表】</Link>
      <Link to="/about">【关于】</Link>
      <Link to="/detail">【详情】</Link>
      <hr />
      {/* switch表示只匹配一个 */}
      <Switch>
       {/* 路由的第一种写法---path表示路径，component表示需要展示的组件 exact 绝对匹配*/}
        {/*通过component属性设置当前组建的话，那么在组件的属性中可以直接传递路由 
通过render或者子组件表示组件的时候，组件的属性中不会包含路由信息*/}
        <Route path="/" exact component={Home} />
        {/*路由的第二种写法--- 执行render函数 */}
        <Route path="/list" render={() => <List />} />
        {/* 路由的第三种写法 子节点的形式*/}
        <Route path="/about">
          <About />
        </Route>
        <Route path="/detail" component={Detail} />
      </Switch>
    </div>
  );
}

export default App;