react-router-dom路由配置小记

最新推荐文章于 2024-07-08 17:06:23 发布

weixin_39118782

最新推荐文章于 2024-07-08 17:06:23 发布

阅读量297

点赞数

分类专栏： React 文章标签： react-router-dom

本文链接：https://blog.csdn.net/weixin_39118782/article/details/102623025

版权

React 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

react-router-dom路由配置

app.js文件

import React, {Component} from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Home from './home/Home';
import About from './about/About';
import Topics from './topics/Topics';
 
class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <div>
            <ul>
              	<li><Link to='/'>首页</Link></li>
              	<li><Link to='/about'>关于</Link></li>
              	<li><Link to='/topics'>主题列表</Link></li>
            </ul>
            <Switch>
            	<Route exact path='/' component={Home} />
            	<Route path='/about' component={About} />
           	 	<Route path='/topics' component={Topics} />
            </Switch>
          </div>
        </BrowserRouter>
      </div>
    )
  }
}

export default App;

home文件夹：
文件目录

-route.js
-index.js
-test.js
-…
route.js

import React, { Component } from 'react'
import { Route, Switch } from 'react-router-dom';
import Home from './index.js'
import Test from './test.js'

export default class index extends Component {
 render() {
   return (
     <div>
       <Switch>
         <Route path='/home' component={Home} />
         <Route path='/home/test' component={Test} />
         // ...其他路由
       </Switch>
     </div>
   )
 }
}

index.js

import React, { Component } from 'react'
import { Link } from 'react-router-dom';
import { Button } from 'antd-mobile'

export default class index extends Component {
 render() {
   return (
     <div>
       <Link to='/home/test'>
         <Button>to test page</Button>
       </Link>
     </div>
   )
 }
}