react 配置路由

最新推荐文章于 2024-07-22 17:04:47 发布

原创最新推荐文章于 2024-07-22 17:04:47 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #app #bug

study progress 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了React 4.0之后路由配置的重大变化，包括使用HashRouter、Route和Redirect的方式。通过示例代码展示如何在App.jsx中直接引入并设置路由，特别是Redirect的用法，使得应用程序在默认路由时重定向到'/chart'页面。

react4.0以后的路由配置和之前的配置还是有很大区别的。
在这里插入图片描述
npm i 不指定版本去下载一般都是最新的，

在App.jsx直接引入配置就行

import React, { Component } from 'react'
import relationChart from './components/RelationChart';
import relationChart1 from './components/RelationChart1';
import './App.less'
import 'antd/dist/antd.css'
import { HashRouter, Route,Redirect } from 'react-router-dom'

export default class App extends Component {
    constructor(props) {
        super(props)
    }

    render () {
        return (
            <HashRouter>
                <Route path='/' exact render={() => <Redirect to="/chart" />}></Route>
                <Route path="/chart" component={relationChart} />
                <Route path="/chart1" component={relationChart1} />
            </HashRouter>
        )
    }
}