Question

我是React领域的新手，在浏览了一周的解决方案和教程后，一直无法解决这个问题。

我具有以下结构，具有预期结果：

“主要”组件（当前为index.js）上具有导航链接。
所述链接指向名为“用户”的组件，该组件显示用户列表。
单击用户链接应将用户列表替换为该用户的“详细视图”（当前显示为“路由测试”），类似于说在Facebook上并选择“配置文件”，它会将您带到另一个页面。

我已按照本教程进行操作： https://reacttraining.com/react-router/web/example/basic，除了现在使用b / c的“ match”参数外，似乎我在codeandbox上使用的不正确，这也是我的新手。

实际结果

单击第一个“用户列表”链接时，它会很好地显示列表，但还会在列表下方呈现“ UserDashboard”组件。

单击其中一个用户链接会更新URL，但会将您带到空白页面。

index.js 的代码：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router- 
dom";
import Users from "./Users";
import UserDashboard from "./UserDashboard";

import "./styles.css";

function App() {
  return (
    <Router>
      <div className="App">
        <ul>
          <li>
            <Link to="/users/">Users List</Link>
          </li>
        </ul>

        <Switch>
          <Route exact path="/users/" component={Users} />          
        </Switch>
      </div>
    </Router>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Users.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router- 
dom";
import UserDashboard from "./UserDashboard";

function Users({ match }) {
  return (
    <div>
      <ul>
        <li>
          <Link to="/1">John Smith</Link>   
        </li>
        <li>
          <Link to="/2">Alex Rogers</Link>
        </li>
        <li>
          <Link to="/3">Ignacio Don</Link>
        </li>
      </ul>
      <Route path="/:id" component={UserDashboard} />
    </div>
  );
}

export default Users;

UserDashboard.js

import React from "react";
import ReactDOM from "react-dom";

function UserDashboard({ match }) {
  return (
    <div>
      <h3>Route Test</h3>
      <h3>{match.params.topicId}</h3>
    </div>
  );
}

export default UserDashboard;

这个想法当然是使用graphQL用实际数据生成所有这些信息，但是直到我解决了这个（可能很明显的）问题，我才能继续进行。

链接到上面的代码演示版本：

https://codesandbox.io/embed/oxx1v2ylyq

Answer 1

在index.js中，我更改了几行，

<Link to="/users">Users List</Link>

和

<Route path="/users" component={Users} />

找出路线中的确切位置，并在用户端删除斜线。

在Users.js中，我将您的链接和路线更改为类似于反应训练中的示例

<Link to={`${match.url}/1`}>John Smith</Link>
<Route path={`${match.path}/:id`} component={UserDashboard} />

在UserDashboard.js中，我更改了

<h3>{match.params.topicId}</h3>

到

<h3>{match.params.id}</h3>

我认为发生的是由于 exact 属性，路由器与您的switch语句中的/ users匹配。我希望这是您想要的行为。

修改

当您单击用户移动时，要使组件切换出

<Route path='/users/:id' component={UserDashboard} />

从Users.js到Switch组件及以下组件内的index.js

<Route exact path="/users" component={Users} />

注意完全又回到了/ users路线。这样可以确保/ users路由需要匹配。

React Router 4-问题渲染嵌套链接

1 个答案: