react路由 首先安装路由 npm i react-router-dom
引入路由
import {
BrowserRouter,
Route}
from
'react-router-dom'
使用路由
import
React, {
Component }
from
'react';
import
Header
from
'./common/header/index'
import
store
from
'./store/index'
import {
Provider }
from
'react-redux'
import {
BrowserRouter,
Route}
from
'react-router-dom'
import
HOME
from
'./pages/home'
import
Detail
from
'./pages/detail'
import
Home
from
'./pages/home';
class
App
extends
Component {
render() {
return (
<
div
className=
"miao"
>
<
Provider
store=
{
store
}
>
<
div
>
<
Header
></
Header
>
<
BrowserRouter
>
<
div
>
<
Route
path=
"/"
exact
component=
{
Home
}
></
Route
>
<
Route
path=
"/detail"
component=
{
Detail
}
></
Route
>
</
div
>
</
BrowserRouter
>
</
div
>
</
Provider
>
</
div
>
);
}
}
export
default
App;
这里注意<Provider>外面要包裹一个div,然后<BrowserRouter>里面也要包裹一个div。
当我们输入/,访问hom。输入/detai,访问detai。加上eaxct就是访问完全相等的路径的页面,如果不加输入/detail也会访问到
home页面和detail页面一起