React路由基本配置app.js
/*
react路由的配置：
1、到官⽅⽂档 reacttraining/react-router/web/example/basic
2、安装  cnpm install react-router-dom --save
3、到项⽬的根组件引⼊react-router-dom
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
4、复制官⽹⽂档根组件⾥⾯的内容进⾏修改（加载的组件要提前引⼊）
<Router>
<Link to="/">⾸页</Link>
<Link to="/news">新闻</Link>
<Link to="/product">商品</Link>
<Route exact path="/" component={Home} />
<Route path="/news" component={News} />
<Route path="/product" component={Product} />
</Router>
exact表⽰严格匹配
*/
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './assets/css/index.css'
import Home from './components/Home';
import News from './components/News';
import Product from './components/Product';
class App extends Component {
render() {
return (
<Router>
<div>
<header className="title">
<Link to="/">⾸页</Link>
<Link to="/news">新闻</Link>
<Link to="/product">商品</Link>
</header>
<br />
<hr />
<br />
<Route exact path="/" component={Home} />
react router6<Route path="/news" component={News} />
<Route path="/product" component={Product} />
</div>
</Router>
);
}
}
export default App;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。