Используйте реактивный маршрутизатор v6

React.js

Первое, что нужно заявить, это то, что react-router на данный момент находится в бета-версии, но с момента последнего релиза прошло уже больше года, а о причине, по которой он так и не вышел, вы можете прочитать здесьissue

Мой личный блог обновлен с версии 5 до версии 6. Если у вас новый проект и маршрут несложный, рекомендуем попробовать.

Лично я считаю, что использование версии v6 имеет два преимущества.

1. Размер упаковки прямо вдвое

Базовая история библиотеки зависимостей использует версию v5, а версия v5 0 зависит от

Отказался от пути к регулярному выражению и внедрил простые внутренние правила преобразования

v5:

v6:

2. Поддержка охранника дружелюбной маршрутизации

В v6 поддерживают эту функцию:

        function Home() {
            const customConfirm = ({action, location, retry}) => {
                console.log(action, location, retry);
                if(window.confirm('hello'))retry()
            }
            useBlocker(customConfirm, true)
            const navigate = useNavigate()
            const click = () => {
                navigate('/about')
            }
            return (
                <div>
                    <button onClick={click}>about</button>
                    'home'
                </div>
            )
        }

api,Обновить

Позвольте мне поделиться с вами некоторыми из известных ям:

1. Так как версия v5 написана классовым компонентом, а версия v6 изменена на хуки, то могут быть некоторые отличия в порядке выполнения.Подробности можно посмотреть здесьissue

2. UseParams вернет только параметры текущего маршрута, и не вернет параметры метро. Подробности можно просмотретьissue

3. Компонент Route больше не может сопоставлять маршруты, например: текущий маршрут /home

В v5:

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

На этом этапе домашний маршрут будет сопоставлен для отображения домашнего компонента.

Но если вы используете этот способ записи в v6

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

На странице отображаются как главная, так и о компонентах

Причина в том, что версия v6 удаляет возможность сопоставления маршрутов Route:

v5:

v6:

Следовательно, в маршруте V6 и маршруты монтажные компоненты должны использоваться в сочетании с,

Кроме того, я рекомендую одноклассника, который интересуется исходным кодом.v4 histroyа такжеv5 react-routerПрочтите примечания к исходникам (хотя сейчас они немного устарели, но хорошо известны более старые версии исходного кода для новой версии исходного кода, которая не является Shoudaoqinlai)

Категории