React基础_7(路由)

前言

React相关的路由知识

正文

React路由
一共需要导入三个组件

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

1.使用Router组件来包裹整个应用
2.使用Link组件作为路由的入口
3.使用Route组件作为路由的出口
4.使用Routes组件包裹所有的Route组件

const First=()=>(
    <h2>我是第一个组件</h2>
)

const App = () => (
    <Router>
        <div>
        		//to的值为需要展示页面的值
                <Link to="me">单击显示第一个组件</Link>
            <Routes>
            	//当path的值与to的值匹配之后展示element里面的内容
                <Route path="me" element={
   <First />} />
            </Routes>
        </div>
    </Router>
)

ReactDOM.render(<App />,document.getElementById('root'))

单击前：