react-router 入门一

最新推荐文章于 2024-03-07 23:59:57 发布

weixin_39460408

最新推荐文章于 2024-03-07 23:59:57 发布

阅读量150

点赞数

分类专栏： React 文章标签： React React-Router-dom 路由

本文链接：https://blog.csdn.net/weixin_39460408/article/details/81211886

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1，下载react-router-dom

npm add react-router-dom

create-react-app demo1

2,引入

import {BrowserRouter as Router,Route ,Link} from 'react-router-dom';

3,设置路由

app.js：

class App extends Component {
  render() {
    return (
     <Router>
       <div>
         <NavBar/>
         <Route exact path='/' component={Home}/>    //Home组件    
                                                    // exact设置，防止出现home组件重复
         <Route path='/content' component={Comtent}/>   //Comtent 组件
       </div>
     </Router>
    );
  }
}

以上代码，在url地址栏里面输入/或者/content，就可以跳转到对应的组件

导航栏NavBar.js：

class NavBar extends Component{
        render(){
                return(
                    <div>
                        <Link to='/'>home</Link>
                        <Link to='/content'>comtent</Link>
                    </div>
                )
        }
}

以上代码，点击导航栏，可以跳转到对应的组件