React 路由基本配置
<p>app.js</p><div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">
react路由的配置：
1、找到官方文档 https://reacttraining.com/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表示严格匹配
</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
import React, { Component } from </span>'react'<span style="color: rgba(0, 0, 0, 1)">;
import { BrowserRouter as Router, Route, Link } from </span>"react-router-dom"<span style="color: rgba(0, 0, 0, 1)">;
import </span>'./assets/css/index.css'<span style="color: rgba(0, 0, 0, 1)">
import Home from </span>'./components/Home'<span style="color: rgba(0, 0, 0, 1)">;
import News from </span>'./components/News'<span style="color: rgba(0, 0, 0, 1)">;
import Product from </span>'./components/Product'<span style="color: rgba(0, 0, 0, 1)">;
class App extends Component {
render() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><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} />
<Route path="/news" component={News} />
<Route path="/product" component={Product} />
</div>
</Router>
<span style="color: rgba(0, 0, 0, 1)"> );
}
}
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> App;</pre>
</div>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
最后，关注【码上加油站】微信公众号后，有疑惑有问题想加油的小伙伴可以码上加入社群，让我们一起码上加油吧！！！<br><br>
来源：https://www.cnblogs.com/loaderman/p/11556639.html
頁:
[1]