如何在 reactjs 的不同组件中编写链接和路由答案

【问题标题】：How can I write Link and Route in different component in reactjs如何在 reactjs 的不同组件中编写链接和路由
【发布时间】：2020-03-23 21:29:49
【问题描述】：

我想在不同的组件中使用 Link 和 Route 以将 Header 组件用作导航栏，但这不起作用。这是我的代码，但链接无法在 Reactjs 中的组件之间进行更改。

App.js

import React, {Component } from 'react';
import {BrowserRouter as Router} from 'react-router-dom';
import Header from './Header';
import Body from './Body';

class App extends Component {
  render() {
    return (
        <Router>
          <Header></Header>
          <Body></Body>         
        </Router>
    );
  }
}
export default App;


Header.js

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

class Header extends Component {
    render(){
        return (
            <ul>
                <li>
                    <Link to="/home">Home</Link>
                </li>
                <li>
                    <Link to="/doc">Doc</Link>
                </li>
            </ul>
        )
    }
}
export default Header;

Body.js

import React, { Component } from 'react';
import {BrowserRouter as Route, Switch} from 'react-router-dom';
import Home from './Home';
import Doc from './Doc';

class Body extends Component {
    render(){
        return (
            <Switch>
                <Route path="/home" component={Home} ></Route>
                <Route path="/doc" component={Doc} ></Route>
            </Switch>
        );
    }
}
export default Body;

Home.js

import React, { Component } from 'react';

class Home extends Component {
    render(){
        return (
            <h1>Home</h1>
        )
    }
}
export default Home;

Doc.js

import React, { Component } from 'react';

class Doc extends Component {
    render(){
        return (
            <h1>Doc</h1>
        )
    }
}
export default Doc;

注意：我查看了这个链接，但这还不够我的回答。 How to work with Route and Link in two Components in ReactJS

【问题讨论】：

标签： javascript reactjs react-router components router

【解决方案1】：

您导入的模块不正确。

import { BrowserRouter as Link } from 'react-router-dom';

应该是：

import { Link } from 'react-router-dom';

和

import { BrowserRouter as Route, Switch } from 'react-router-dom';

应该是：

import { Route, Switch } from 'react-router-dom';

Link 和 Route 是独立的组件，您将它们作为 BrowserRouter 导入，它只导入带有别名的 BrowserRouter。

出于语义原因，您可能希望在将 BrowserRouter 作为路由器导入时这样做。

【讨论】：

【解决方案2】：

您必须在 Header 类组件中更改以下行

import {BrowserRouter as Link} from 'react-router-dom';

到

import {Link} from 'react-router-dom';

而在你Body类组件变化

import {BrowserRouter as Route, Switch} from 'react-router-dom';

到

import {Route, Switch} from 'react-router-dom';

【讨论】：

【解决方案3】：

问题是由于 Headers.js 中的错误导入引起的

import {BrowserRouter as Link} from 'react-router-dom';

应该是：

 import { Link} from 'react-router-dom';

您可以查看已解决问题的工作示例here

【讨论】：