[JavaScript知识库]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'))

单击前：

单击后
BrowserRouter可以替换为HashRouter，表现出来的不同在于网址的变化

编程式导航：
使用的是useNavigate函数来实现的，在使用之前需要导入，这个东西好像只能用在函数组件间和一些钩子函数里。

import {useNavigate} from 'react-router-dom'

const First=()=>{
	//通过函数的返回值获取nav
    const nav=useNavigate();
    const nextClick=()=>{
    	//参数为需要转跳到的页面的path值
        nav("me_2")
    }
        return (
            <div>
                <h2>这是第一个页面</h2>
                <button onClick={nextClick}>单击此处转跳到第二个页面</button>
            </div>
        )
}

const Second =() =>{
    return (
        <h2>这是第二个页面</h2>
    )
}

const App = () => (
    <Router>
        <div>
                <Link to="me_1">单击显示第一个组件</Link>
            <Routes>
                <Route path="me_1" element={<First />} />
                <Route path="me_2" element={<Second />} />
            </Routes>
        </div>
    </Router>

)

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

单击"单击此处转跳到第二个页面"后的变化

单击之后会回到上一个截图的页面。
可以为转跳到的组件传递参数，格式如下：

nav("me_2",{XX:XX,XX:XX,....})

设置默认展示页面，也就是默认路由，将path改成/表示默认路由

const First=()=>{
    const nav=useNavigate();
    const nextClick=()=>{
        nav("me_2")
    }
        return (
            <div>
                <h2>这是第一个页面</h2>
                <button onClick={nextClick}>单击此处转跳到第二个页面</button>
            </div>
        )
}

const Second =() =>{
    return (
        <h2>这是第二个页面</h2>
    )
}
const Third = () =>{
    return (
        <h2>我是默认的页面</h2>
    )
}
const App = () => (
    <Router>
        <div>
                <Link to="me_1">单击显示第一个组件</Link>
            <Routes>
                <Route path="me_1" element={<First />} />
                <Route path="me_2" element={<Second />} />
                //设置默认路由
                <Route path="/" element={<Third />} />
            </Routes>
        </div>
    </Router>

)

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

React的匹配模式默认是模糊匹配，意味着当to的值是以path的值开头就能够匹配成功，例如path="/a"，to="/aa" to="/a" to="/ab"，只要是to的值包含path的值都能匹配成功.
给Route组件添加exact属性就可以精确匹配，只有当完全以一样的时候才可以匹配到结果.

<Route exact path="/aa" element={...}>

结语

笔者也是第一次学习做出的总结，要是能从我这里得到一些帮助最好不过，若有错误还望大佬在评论帮忙指出。