React-router路由

目录

一：React-router路由

二：React-router-dom路由配置

1：下载React-router-dom模块

2:在APP.js里引入路由模块

3:引入需要配置路由的组件

4:编写路由链接

5:注册路由

三：嵌套路由

一：React-router路由

路由主要实现单页面应用，提高用户体验

二：React-router-dom路由配置

1：下载React-router-dom模块

npm i react-router-dom --save

在index.js里包裹

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

ReactDOM.render(
  <React.StrictMode>
    {/* 配置路由 */}
    <BrowserRouter>
      <App />
    </BrowserRouter>

  </React.StrictMode>,
  document.getElementById('root')
);

2:在APP.js里引入路由模块

import {Route,Routes,Link} import 'react-router-dom'

3:引入需要配置路由的组件

4:编写路由链接

function App() {
    return(
        <div className="App">
            {/* 编写路由链接 */}
            <Link to='/'>默认路由=首页</Link>
            <Link to='/about'>about页</Link>
            <Link to='/home'>home页</Link>
        </div>
);

}

export default App;

5:注册路由

function App() {
    return(
        <div className="App">
            {/* 编写路由链接 */}
            <Link to='/'>默认路由=首页</Link>
            <Link to='/about'>about页</Link>
            <Link to='/home'>home页</Link>

            {/* 注册路由 */}
            <Routes>
                <Route path='/' element={<Routeluyou />}></Route>
                <Route path='/home' element={<Home />} />
                <Route path='/about' element={<About />}></Route>            
            </Routes>

        </div>
);

}

export default App;

以上5🙅步是路由的基本配置

三：嵌套路由

1：引入子路由

2： 嵌套子路由APP.js页面配置

function App() {
    return(
        <div className="App">
            {/* 编写路由链接 */}
            <Link to='/'>默认路由=首页</Link>
            <Link to='/about'>about页</Link>
            <Link to='/home'>home页</Link>

            {/* 注册路由 */}
            <Routes>
                <Route path='/' element={<Routeluyou />}></Route>
                <Route path='/home' element={<Home />} />
                <Route path='/about' element={<About />}> 
                    {/* 嵌套路由 二级路由 */}

                      {/* 默认路由 */}
                      <Route path='' element={<Address />} />

                      <Route path='address' element={<Address />} />
                      <Route path='yhj' element={<Yhj />} />
                </Route>           
            </Routes>

        </div>
);

}

export default App;

3：在一级路由的组件里配置路由出口

import { Outlet, Link } from 'react-router-dom' //路由出口
export default class About extends Component {
    static propTypes = {

    }

    render() {
        return (
            <div>
                这是About组件
                <p>
                    <Link to='/about/address'>收获地址</Link>
                </p>
                <p>
                    <Link to='/about/yhj'>优惠券</Link>
                </p>
                {/* 路由导出 */}
                <Outlet></Outlet>
            </div>
        )
    }
}

四：NavLink

        <NavLink></NavLink> 功能强大 是一个高亮显示路由的

<NavLink>是<Link> 的一个特定版本, 会在匹配上当前 URL 的时候会给已经渲染的元素添加样式参数

属性

activeClassName: string

<NavLink
  to="/about"
  activeClassName="selected"
>MyBlog</NavLink>