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:{} //路由指定的pathurl：{}// 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);