标签：index dom component react v6 import router

安装
npm install react-router-dom

修改index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {BrowserRouter} from 'react-router-dom'

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

路由匹配

import React, {Component} from "react"
import {Route, Routes, Navigate, NavLink} from 'react-router-dom'
import FirstIndex from "./component/FirstIndex/index"
import MultilevelRoute from "./component/MultilevelRoute/index"
import HistoryDemo from "./component/HistoryDemo/HistoryDemo"

export default class App extends Component {

    render() {
        return (
            <div className="App">
                <HistoryDemo></HistoryDemo>
                <div>
                    <NavLink to="/index">Test1</NavLink>
                    <NavLink to="/multilevelRoute">MultilevelRoute</NavLink>
                </div>
                <div>
                    {/* react-router-dom v5使用 <Switch></Switch>*/}
                    {/* react-router-dom v6使用 <Routes></Routes>*/}
                    <Routes>
                        {/* react-router-dom v5使用 component={Test1}*/}
                        {/* exact={true} 开启严格匹配*/}
                        <Route exact={true} path="/index" element={<FirstIndex></FirstIndex>}></Route>
                        {/* react-router-dom v6嵌套路由需要在path最后加”/*”*/}
                        <Route path="/multilevelRoute/*" element={<MultilevelRoute></MultilevelRoute>}></Route>
                        {/*
                            react-router-dom v5 默认页设置:
                            <Redirect to="/index"></Redirect>
                        */}
                        {/* react-router-dom v6 默认页设置 */}
                        <Route element={<Navigate to="/index"/>}></Route>
                    </Routes>
                </div>
            </div>
        );
    }
}

标签：index,dom,component,react,v6,import,router
来源： https://blog.csdn.net/m0_50163856/article/details/122807796

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。