来自 react-route-dom 的 React.js 路由问题

Posted 2023-02-22

【中文标题】来自 react-route-dom 的 React.js 路由问题

【英文标题】：React.js Route problem from react-route-dom

【发布时间】：2021-03-30 21:57:13

【问题描述】：

大家好，我是 react.js 的新手。我的问题是，当我在 react-router-dom 中使用 Route 时，它​​无法正常工作

所以，我有一个像 www.div.example.com/test/test-1 这样的链接作为主页，我有 Route

Import React from "react";
Import BrowserRouter as Router, Route, Switch from "react-router-dom";
Import User from "./User"

const App = () => 



  return (
<Router>
    <Switch>
      <Route path = "/user" exact component =User/> 
    </Switch>
</Router>


export default App

用户组件：

Import React from "react";

const User = () => 



  return (
<div> User </div>


export default User

我有一个链接，应该使链接根据之前的 url 工作，例如

www.div.example.com/test/test-1/user

我的链接代码

<Link to = "./user" />

事情是链接是工作

但是路由组件不会出现

我在package.json的主页是

"homepage" : "."

我找了很多，但没有任何线索

你能帮忙吗？

【问题讨论】：

您是否尝试将exact 属性添加到<Route ... exact /> 中？

是的，我做了，但没有任何组件不会显示

你能发布你所有的代码吗？我没有看到组件被传递给路由

好的，我添加了源代码和用户组件源代码

在你的 app.js 文件中试试这个 export default () => ( );

【参考方案1】：

而不是

<Link to = "./user" /> 

你需要

<Link to="/user" /> 

【讨论】：

当我这样做时，网址变成 www.div.example.com/user

这种情况下是否渲染了用户组件？

如果您的应用程序是从服务器上的子目录提供的，则需要将基本名称添加到 BrowserRouter。使用下面的代码，所有路由都将以 test 作为基本名称。 <Router basename="/test"> <Switch> <Route path = "/user" exact component =User/> </Switch> </Router>

现在有新的东西我会尝试并给你更新

关于用户组件没有渲染