React 路由基本配置
Posted loaderman
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React 路由基本配置相关的知识,希望对你有一定的参考价值。
app.js
/* 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表示严格匹配 */ 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} /> <Route path="/news" component={News} /> <Route path="/product" component={Product} /> </div> </Router> ); } } export default App;
以上是关于React 路由基本配置的主要内容,如果未能解决你的问题,请参考以下文章
使用具有不同片段字段的相同中继根查询的多个 react-router-relay 路由
使用 Relay 和 React-Native 时的条件片段或嵌入的根容器
[react] Module not found: Can't resolve 'schedule' in 'C:Usersadcaldvmtn7myapp (代码片段