当前位置: 首页 > 知识库问答 >
问题:

如何用React Router链接到由另一个路由呈现的组件内的路由

通远
2023-03-14

我试图在我的reactjs应用程序中使用react路由器。而我遇到了这个问题:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import About from '../Pages/About';
import Home from '../Pages/Home';
import Topics from '../Pages/Topics';
import LinkTest from '../Pages/LinkTest';

class AppRouter extends Component {
  render() {
    return (
        <Router>
          <div>
            <ul>
              <li>
                <Link to="/home">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
              <li>
                <Link to="/topics">Topics</Link>
              </li>
              <Route path="/home" component={LinkTest}/>
            </ul>

            <hr />

            <Route path="/home" component={Home}/>
            <Route path="/about" component={About} />
            <Route path="/topics" component={Topics} />

          </div>
      </Router>
    );
  }
}

export default AppRouter;
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class LinkTest extends Component {
  render() {
      const {match}=this.props;
    return (
        <div>
            <Link to={`${match.url}/Test`}>Link To Test</Link>
        </div>
    );
  }
}

export default LinkTest;
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import Test from './Test';

class Home extends Component {
  render() {
      const {match} = this.props;
      console.log(match.url);
    return (
        <Router>
            <div>
                <h2>
                    Hello from Home page
                    <Link to={`${match.url}/Test`}>Link To Test</Link>
                    <Route path={`${match.url}/Test`} component={Test}/>
                </h2>

            </div>
        </Router>

    );
  }
}

export default Home;

然而:

>

  • 当我单击“LinkTest”组件内的链接(前面已经呈现)时,浏览器上的url显示为“http://localhost:3000/home/test”,但没有任何变化。

    当我单击“home”组件内的链接时(它与使用相同链接的“linktest”同时呈现),它在浏览器上显示了相同的url:“http://localhost:3000/home/test”,只是这次呈现的是“test”组件。

    我希望这足够清楚。

  • 共有1个答案

    楚俊逸
    2023-03-14

    您可以通过以下方式完成:

    <Route exact path='/a' component={A} />
    <Route path='/b' component={B} />
    
    // Following should be router inside Component B
    <Route exact path='/b/abc' component={OtherComponent}
    

    如果你想的话,我准备了几个react-router 4示例。这些都在这里主持。https://github.com/sandipnirmal/react-router-示例

     类似资料:
    • 我正在尝试使用react router(版本^1.0.3)做一个简单的重定向到另一个视图的操作,我只是觉得有些累。 我只需要将用法发送到“/login”,就这样。 我能做什么? 控制台中的错误: 未捕获的引用错误:未定义PropType 用我的路线归档

    • 在标记为副本之前,请仔细阅读此内容,我向您保证,我已经阅读并尝试了每个人在stackoverflow和github上提出的关于此问题的所有建议。 我在我的应用程序中有一条路线,如下所示; route rendering呈现打开用户角色的组件,并基于该角色惰性加载正确的Routes组件,Routes组件呈现主页的开关。简化后,如下所示。 然后是路由组件 因此,问题是每当用户从/导航到/秒等...应用

    • react&React-Router的新功能。我正在使用react-router-4 我有以下组件-login-home-header-sidebar-content 登录组件没有标题或侧栏。 这就是我的路由 应用程序JS 然后在我的Home组件中,我有侧边栏和内容。 home.js呈现方法 侧边栏组件有一个链接,该链接具有“to”值“/home/dashboard”。 不幸的是,这并不奏效。单击

    • Navigating Programmatically

    • 我正在学习React,在遵循几个教程的同时,我想回去学习如何使其成为D.R.Y,因此给出了以下app.js: app.js 我注意到,路线也被复制到我用来声明侧栏标题的路径中: 侧边ata.js: 考虑到代码被复制,我一直在尝试映射路由组件声明中的组件: 尝试1: 但我得到一个错误,并注意到调用组件时它不起作用,在VSC中,我的组件带来了: 它们变灰了。 尝试2: 我想也许我可以在中通过引入组件来