快速创建react路由,了解一些react路由配置

你来百度搜索这个问题就说明你就没好好的看人家提供的README.md文件

快速创建react路由,了解一些react路由配置

这上面说的很清楚,如何安装、如何使用,删除src/App.js,打开这个链接复制贴贴就OK了,我们来掩饰一遍

1.执行 npm install --save react-router-dom 或者 yarn add react-router-dom 根据自己的实际情况选择

2.然后找到src/App.js 删除掉里面所有的 ,复制我下面的代码

import React from "react";

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

const BasicExample = () => (

<Router>

//这里是静态样式

<div>

<ul>

<li>

<Link to="/">Home</Link>

</li>

<li>

<Link to="/about">About</Link>

</li>

<li>

<Link to="/topics">Topics</Link>

</li>

</ul>

<hr />

//这里是配饰路由的地方(核心)

<Route exact path="/" component={Home} />

<Route path="/about" component={About} />

<Route path="/topics" component={Topics} />

</div>

</Router>

);

//子组件 Home

const Home = () => (

<div>

<h2>Home</h2>

</div>

);

//子组件 About

const About = () => (

<div>

<h2>About</h2>

</div>

);

// 子组件 Topics

const Topics = ({ match }) => (

<div>

<h2>Topics</h2>

<ul>

<li>

<Link to={`${match.url}/rendering`}>Rendering with React</Link>

</li>

<li>

<Link to={`${match.url}/components`}>Components</Link>

</li>

<li>

<Link to={`${match.url}/props-v-state`}>Props v. State</Link>

</li>

</ul>

<Route path={`${match.path}/:topicId`} component={Topic} />

<Route

exact

path={match.path}

render={() => <h3>Please select a topic.</h3>}

/>

</div>

);

const Topic = ({ match }) => (

<div>

<h3>{match.params.topicId}</h3>

</div>

);

export default BasicExample;

删掉我的注释,直接暴力复制贴贴,怎么样解决了吗

以上是 快速创建react路由,了解一些react路由配置 的全部内容, 来源链接: utcz.com/a/68825.html

回到顶部