react 路由

🧙 Questions

react-router 实现访问不同路径显示不同的页面内容

☄️ Ideas

npm install react-router-dom localforage match-sorter sort-by

react入口

进入react前，先进入路由，后面显示的内容全部用路由去控制

const mountNode = document.getElementById('root')
ReactDOM.render(<App />, mountNode);

路由配置

进入路由首先，对路由进行配置
默认先进入layout，对网页结构做控制，默认访问home页面

export default function App() {
  return <>
    <React.StrictMode>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layouts/>}>
            <Route index element={<Home/>}/>
            <Route path="/todo" element={<Todo/>}/>
            <Route path="/note" element={<Note/>}/>
          </Route>
        </Routes>
      </BrowserRouter>
    </React.StrictMode>
  </>;
};

配置layouts

通过main标签对网页整体样式做调整
直接使用<Outlet/>，显示路由中配置的页面

export default function Index() {

  return <>
    <main className={"leo-layouts"}>
      <Outlet/>
    </main>
  </>;
};

home页面

export default function Home() {

  const history = useNavigate();

  return <>
    <Carousel className={"leo-home-carousel"} autoplay autoplaySpeed={10000} dots={false}>
      {
        carousels.map((item, index) => {
          return <img className={"leo-home-carousel-img"}
                      src={item.img}
                      onClick={() => history(item.url)}
                      alt={item.name}
                      key={index}/>;
        })
      }
    </Carousel>
  </>;

};

效果

默认访问home页面，home页面滚动，点击直接跳转到todo页面和note页面，重新加载新的页面。

🔗 Links

• react website
• react router docs