react简易版路由搭界【一级】

____白山茶

于 2021-10-23 10:31:27 发布

阅读量131

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_50805397/article/details/120917696

版权

本文档将指导您逐步搭建React简易路由。首先从router/index.js开始配置，然后在App.tsx中整合，最后通过index.tsx作为应用入口完成设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录结构

第一步：

router/index.js

//在react-router-dom引入所需要的
import {BrowserRouter as Router,Switch,Route,Redirect} from "react-router-dom"
//引入页面
import App from "../App"
import Home from "../page/Home/index.tsx"
import Detail from "../page/Detail/index.tsx"
//定义RouterView
const RouterView=()=>{
    return <div>
        <Router>
        <App>
            <Switch>
             <Route path="/home" component={Home}></Route>
             <Route path="/detail" component={Detail}></Route>
             <Redirect from="/" to="/home"></Redirect>
            </Switch>
        </App>
    </Router>
    </div>
}
//抛出
export default RouterView;

最低0.47元/天解锁文章