React中使用路由-基本使用(未单独写router文件)

1.安装路由库

npm i react-router-dom

2.组件中引入路由（按需导入，文件中用到哪个就用哪个）

import {Link,BrowserRouter,Route} from 'react-router-dom'

3.编写路由链接

//to地址不要用字母大写,这里的路由模式我们选择了BrowserRouter即路径不带#的那种
<Link to='/about'>About</Link>
<Link to='/home'>Home</Link>

4.引入组件About和Home组件

import Home from './components/Home'
import Aboutfrom './components/About'

5.注册路由

<Route path='/about' component={About}/>
<Route path='/home' component={Home}/>

6.Route和Link需要包在统一的<BrowserRouter>中，我们可以直接在root下的根组件进行包裹

在<App/>外层包裹

//index.js最外层的根组件
.....
import {BrowserRouter} from 'react-router-dom'

React.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root')
)

如果用<HashRoute>包裹就是hash路径，直接将导入和使用的两个地方的BrowserRoute换成HashRoute。

这两种方式的区别除了路径的不同，还有就是hash路径，#后面的东西都只做前端使用，不管写多少都不会发送到服务器端。