未捕获的类型错误：无法读取未定义的属性(读取"createHref")

Question

我试图简单地路由不同的组件与react-router-dom v6…我得到一个错误(无法读取未定义的属性(读取'createHref'))。我正在使用有样式的组件，但不知道这是否起了作用。这些路由是在App.js和相应的按钮中定义的，该按钮链接到SideBySideButtons.js中的页面

下面是两个主要文件:

** App.js **

import React from 'react';
import { Routes, Route, Router } from 'react-router-dom';
import Landing from './components/Landing';
import EarlyAccess from './components/LandingPages/EarlyAccess';
import WebFont from 'webfontloader';
if (process.env.NODE_ENV === 'development') {
WebFont.load({
google: {
families: ['Barlow', 'Playfair Display', 'Overpass']
}
});
}
/* 
Rather than create a memory history object inside app.js, we create it in bootstrap.js because we want to customize it quite a bit
*/
export default ({ history }) => {
return (
<div>
<Router location={history.location} history={history}>
<Routes>
<Route exact path="/earlyaccess" element={ <EarlyAccess /> } />
<Route exact path="/learn" element={ <EarlyAccess /> } />
<Route path="/" element={ <Landing /> } />
</Routes>
</Router>
</div>
);
};

** SideBySideButtons.js **

import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import styled from 'styled-components';
const DisplayBlock = styled.div`
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: center;
border-radius: 3px;
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
color: #000;
font-size: 16px;
text-transform: uppercase;
@media screen and (max-width: 767px) {
padding-top: 10px;
}
`
const EarlyAccessLink = styled(RouterLink).attrs({ to: '/earlyaccess'})`
display: inline-block;
padding: 9px 15px;
margin-top: 20px;
border: 0;
border-radius: 3px;
font-family: 'Playfair Display', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: inherit;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;

background-color: #0c0a89;
color: #fff;
-webkit-transition: all 350ms ease;
transition: all 350ms ease;

&:hover {
background-color: #09d5b0;
-webkit-transform: translate(0px, -2px);
-ms-transform: translate(0px, -2px);
transform: translate(0px, -2px);
text-decoration: none;
}
@media screen and (max-width: 991px) {
padding-right: 15px;
padding-left: 15px;
}
`
const LearnMoreLink = styled(RouterLink).attrs({ to: '/learn'})`
cursor: pointer;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-top: 20px;
margin-left: 15px;
padding: 9px 15px;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
border-style: solid;
border-width: 1px;
border-color: #15113b;
border-radius: 3px;
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
background-color: transparent;
color: #0c0a89;
font-family: 'Playfair Display', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: inherit;
text-decoration: none;
text-transform: uppercase;

@media screen and (max-width: 991px) {
padding-right: 15px;
padding-left: 15px;
}
&:hover {
background-color: #15113b;
border-color: #ffd343;
color: #fff;
box-shadow: 1px 1px 12px 0 rgba(0, 0, 0, 0.08);
text-decoration: none;
-webkit-transform: translate(0px, -2px);
-ms-transform: translate(0px, -2px);
transform: translate(0px, -2px);
text-decoration: none;
}
`
export default function Buttons() {
return (
<React.Fragment>
<DisplayBlock>
<EarlyAccessLink>Early Access</EarlyAccessLink>
<LearnMoreLink>Learn More</LearnMoreLink>
</DisplayBlock>
</React.Fragment>
)
}

Answer 1

一个简单的修复方法是导入BrowserRouter as Router而不是使用Router