- 全局安装(以后可以任意项目里使用,不用重复安装,只需要创建项目名称即可)
npm install create-react-app -g
- 创建项目名称(myapp是文件名)
create-react-app myapp
安装完成之后,我们将在src目录下写自己的单页面,将src目录自带的文件全删了,我们自己写,要有一个入口文件(index.js)
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
// 样式最好引导全局引入,局部组件需要样式的话,可以写行内样式
import './App.css'
ReactDOM.render(
<App/>,
document.getElementById('root')
)
将App组件作为根组件,渲染到页面,
import React from 'react'
//引入需要的组件
import {NavLink,Route,HashRouter,useParams} from 'react-router-dom'
import Home from './Home'
import News from './News'
import Contact from './Contact'
需要路由链接时,需要下载 react-router-dom
,在原有的项目里继续下载
npm install react-router-dom
App里的内容
class App extends React.Component{
render(){
return(
<HashRouter>
<div >
<h1>用react构建单页面应用</h1>
<ul className='heading'>
<li><NavLink to='/' exact>站点主页</NavLink></li>
<li><NavLink to='/news'exact>新闻中心</NavLink></li>
<li><NavLink to='/Contact'>联系我们</NavLink></li>
</ul>
<div className='contain'>
<Route path='/' exact component={Home} />
<Route path='/news' exact component={News} />
<Route path='/Contact' component={Contact} />
</div>
</div>
</HashRouter>
)
}
}
//导出
export default App
{id}
要在函数里使用
function News (props) {
let {id} = useParams()
return(
<h1>我是新闻{id}</h1>
)
}
<Route path='/news/:id' component={Xinwen} />