react 路由 router

最新推荐文章于 2023-06-20 18:50:18 发布

qq_25186543

最新推荐文章于 2023-06-20 18:50:18 发布

阅读量188

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/qq_25186543/article/details/80313325

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、先安装路由

npm i react-router-dom -S

2、在 app.js 里接入

import React from 'react'
import {
	BrowserRouter as Router,
	Route,
	Link
} from 'react-router-dom'

3、接入路由组件

const About = () => (
	<div>
		<h2>About</h2>
	</div>
)
const Home = () => (
	<div>
		<h2>Home</h2>
	</div>
)
//使用 link   Route

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home 导航</Link></li>
        <li><Link to="/about">About 导航</Link></li>
      </ul>

      <hr/>
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>      或者 routes 是数组 ，sidebar 是组件名称

{routes.map((route, index) => (
   <Route
      key={index}
      path={route.path}
      exact={route.exact}
      component={route.sidebar}
   />
))}