react路由

安装

npm i react-router-dom -S

导入路由需要的组件

import{
	BrowserRouter as Router, //总路由
	Route, //路由页面
	Link， //路由导航
	NavLink， //单行链接（带active 激活class 添加路由高亮）
	Redirect， //路由重定向
	Prompt， //退出提示
	Switch //一次只显示一个路由
} from 'react-router-dom'

基本路由框架

ReactDOM.render(
  <React.StrictMode>
    <Router>
    //Router 总路由
      <div>
      	<Link to="/" exact>首页</Link>|<Link to="/about">关于我们</Link> //to 切换的链接
      </div>
       <Route path="/" exact component={App}/>
       <Route path="/about" component={About}/>
       //Route 路由
       //path 对应的链接   
       //component 对应的组件							         
    </Router>
  </React.StrictMode>
 document。getElementById('root')
);
function About(){
  return(<div><h1>关于我们</h1></div>)
}
function Home(){
  return(<div><h1>首页</h1></div>)
}

路由参数

<Link to="/produce/123">产品123</Link>
<Link to="/produce/abc">产品abc</Link>

<Route path="/produce/:id" component={Produce}></Route>

function Produce({match}){
  return (<h1>我是产品:{match.params.id}</h1>)
}

match是组件默认传递的参数，match.params组件路由参数对象
除了match对象，还有history对象和location对象

离开页面弹出框
需要导入prompt

function About(){  
  return (
    <div>
      <h1>关于我们</h1>    
      <Prompt message="当前正在编辑，您确定要离开吗?"></Prompt>  
    </div>) 
 }

子路由
在这里用NavLink讲解,使用时需要导入

<NavLink to="/detail">详情</NavLink>

<Route path="/detail" component={Detail}>{Detail}</Router>

function Detail({location,match}){
  return(
    <div>
      <p>
        <NavLink to={match.url+'/arg'}>参数</NavLink> | <NavLink to={match.url+'/com'}>评论</NavLink>
     </p>
      <Route path={match.url+'/arg'} component={Arg}></Route>
      <Route path={match.url+'/com'} component={Com}></Route>
    </div>
  )
}
//match.url 获取当前匹配的主路由地址

function Arg(){
  return (<h1>我是Arg      </h1>);
}
function Com(){
  return (<h1>我是com</h1>);
}

路由的404配置与Switch
需要导入Switch，它的作用能让匹配的路由唯一

<Switch>
  <Route path="/" exact component={Home}></Route>
  <Route path="/about" component={About}></Route>
  <Route path="/produce/:id" component={Produce}></Route>
  <Route path="/detail" component={Detail}></Route>
  <Route component={NoMatch}></Route>
</Switch>
//定义的404路由要写到最后

function NoMatch({location,history}){  
  return (
    <div>    
      <h1>页面被外星人劫走了</h1>    
      <p>找不到{location.pathname}</p>    
      <p>
        < NavLink to="/" exact>首页</NavLink>    
        <button onClick={()=>history.push('/')}>首页</button>    
      </p>  
    </div>)
 }
 //有些浏览器可能看不到404页面
 //解决这个问题的办法是把BrowserRouter as Router换成HashRouter as Router就可以了

重定向的问题
需要导入Redirect

function Detail({match}){  
  return (
    <div>
      <h1>Detail详情</h1>  
      <p> 
        < NavLink to={match.url+'/arg'}>参数</NavLink>|< NavLink to={match.url+'/com'}>详情</NavLink>
      </p>  
      <Route path={match.url+'/arg'}  component={Arg}/>  
      <Route path={match.url+'/com'}  component={Com}/>  
      <Redirect from={match.url} to={match.url+'/com'}></Redirect>  
    </div>
    )
 }

组件的参数

match匹配当前的参数

isExact: true ,//是否精确匹配
params:{}// 当前路由的参数
path:{} //路由指定的path
url：{}// link 指定的链接地址

history当前路由信息

go() 历史记录跳转
goBack() 历史记录返回
goFoward() 前进
length  历史记录的长度
push()  跳转 有历史记录
replace() 跳转没有历史记录
---hash #后面的参数
---pathname 当前路由的地址
---search 问号后面的参数

location同history的location的当前地址信息

js路由跳转

history.push('/login');

非路由组件具有路由props
在非路由页面导入

import {WithRouter} from 'react-router-dom'

class ToDo extends Component {
    constructor(props) {
        super(props);
        console.log(props,"totototototootoototodoooododod");
           }
       }

export default withRouter(ToDo);