react-router v4+使用

最新推荐文章于 2025-03-01 17:25:53 发布

原创最新推荐文章于 2025-03-01 17:25:53 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react-router

react 专栏收录该内容

42 篇文章

订阅专栏

本文详细介绍如何使用react-router-dom搭建React应用的路由系统，包括安装、配置及基本使用方法，通过实例展示如何创建和渲染不同页面。

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

1、安装react-router-dom

cnpm intall --save-dev react-router-dom

2、app.js

import React, { Component } from 'react';
class App extends Component {
  render () {
    return (
      <div>
        app.jsx
        {this.props.children }
      </div>
    )
  }
}
export default App;

3、页面

import React, { Component } from 'react';
import { Route } from 'react-router-dom'

class Index extends Component {
    constructor (props) {
        super(props)
    }
    render () {
        return (
            <div>
                <hr />
                Index
            </div>
        )
    }
}
// 不再单独的抛出组件，而是抛出路由
let routerHandler = () => {
	return <Route exact path='/' component={Index}/>
}
export default routerHandler

4、新建文件夹 router/index.jsx

import React from 'react'
import { HashRouter as Router } from 'react-router-dom'
//import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
import Index from '../component/Index'
import List from '../component/List'
import App from '../App'
console.log(Index)
// 1.越详细的路由越靠前，权限越大越靠后
// 2.给权限大的路由去加一个exact属性
export default () => {
	return (
		<Router>
			<App>
				{/* <Switch>
				    <Route exact path="/" component={Index} />
                </Switch> */}
                <Index />
                <List />
			</App>
		</Router>
    )
}

5、index.js 引入Router

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Router from './router/index'
import * as serviceWorker from './serviceWorker';
ReactDOM.render((
    <Router />
), document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();