欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React—路由

程序员文章站 2022-03-10 18:15:56
...

1、cnpm install react-router-dom --save

2、新建component文件夹,以及三个js文件分别为first.js second.js third.js

3、

import React from 'react';
import ReactDom from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import First from './component/first';
import Second from './component/second';
import Third from './component/third';

class MyComponent extends React.Component {
    render() {
        return (
            <Router>
                <div>
                    <ul>
                        <li>

                            <Link to="/first">路由一</Link>
                            <Link to="/second">路由二</Link>
                            <Link to="/third">路由三</Link>
                        </li>
                        <Route path="/first" component={First}/>
                        <Route path="/second" component={Second}/>
                        <Route path="/third" component={Third}/>
                    </ul>
                </div>
            </Router>
        );
    }
}

ReactDom.render(
    <MyComponent />,
    document.getElementById('root')
);
相关标签: 路由