在React Router v6.中创建页面之间的链接

Question

App.js

class App extends Component {
render() {
return (
<Router>
<Header />
<Routes>
<Route path="/" element={<Home />} />
<Route path="signin" element={<Signin />} />
</Routes>
</div>
</Router>
);
}
}

登录.js

class Card extends Component {
render() {    
return (        
<Link to="signin">Signin</Link>
)
}
}

如何在没有主页出现的情况下移动到react路由器版本6中的登录页面，感谢您的帮助

Answer 1

首先，我建议您将signin端点从signin更改为/signin。其次，在您的代码中有一个额外的闭包</div>。

你可以用这种方式在这里使用Redirect

class App extends Component {
render() {
return (
<Router>
<Header />
<Routes>
<Route path="/" element={} >
<Redirect to="/signin" />
</Route>
<Route path="/home" element={< Home />} />
<Route path="/signin" element={<Signin />} />
</Routes>
</Router>
);
}
}

有关更多信息，请参阅此处

Answer 2

当使用componentWillMount时，在渲染前执行并使用根组件时，可以使用该组件中的Routes，如下面的

class App extends Component {
componentWillMount() {
/**
codes that fetch from api
**/ 
}
render() {
return (
<Router>
<Header />
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</Router>
);
}
}

在已链接到签名的组件卡中，必须像下面的一样

class Card extends Component {
render() {    
return (        
<button>
{hasProducts ? <nav><Link to="signin">Checkout</Link></nav> : 'Checkout'}
</button>
)
}
}

在决定使用库CCD_ 6的基于类的组件中，无法使用CCD_ 7作为访问当前url的路径，代替此，可以使用CCD_，也可以使用react-router v6上的Routes和访问当前url路径的条件三元运算符，如下面的

class WrappedComponent extends Component {
render() {
const pathname = window.location.pathname === current pathname;
return (
<>
{ pathname ? 
<Routes>
<Route path="signin" element={<Signin />} />
</Routes>
:
<div>
/**
codes that return data of api and firstly rendered
**/
</div>
}
</>
)
}
}