[JavaScript知识库]react笔记 路由

使用路由首先需要安装react-router-dom

随后引入react-router ????????????????????????????????!!注意 首字母大写

import {BrowserRouter as Router,Route,link} from "react-router-dom"

1、根据网址自动判断页面

随后在app根标签内 ！！注意? exact path 如果你的 "/"默认地址没有用exact path? 遇到"/home"

会同时把 匹配为 "/"的页面和? "/home"的页面同时加载出来?? "/"建议用exact path

exact path为严格匹配路由地址

function App() {
  return (
    <div className="App">
      <div></div>
      {/* <News/> */}

      <Router>
        <div>
          <Route exact path="/" component={Home}></Route>
          <Route path="/home" component={Home}></Route>
          <Route path="/news" component={News}></Route>
          <Route path="/list" component={List}></Route>
        </div>
      </Router>
    </div>
  );
}

component代表你的组件? 组件需要先import引入在使用

2、按钮跳转 注意Link首字母大写

function App() {
  return (
    <div className="App">
      <Router> 
        <div>
          <Link to="/list">list</Link>   
          <br/>
          <Link to="/home">home</Link>
          <hr/>
          <br/>
        </div>
      </Router>
    </div>
  );
}

?这样就可以通过标签跳转页面

?

?

?