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

Question

我想在其他组件中使用“链接和路由”，以将“ 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;

注意：我签出了此链接，但这不足以回答我。 如何在ReactJS的两个组件中使用Route和Link

Answer 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';

链接和路由是单独的组件，您将它们作为BrowserRouter导入，后者仅导入具有别名的BrowserRouter。

出于语义原因，您一次想执行此操作是将BrowserRouter导入为路由器时。

Answer 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';

Answer 3

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

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

它应该是：

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

您可以在此处查看已解决问题的工作示例

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

问题描述

3 个解决方案

解决方案1
0 2019-11-28 09:16:47

解决方案2
0 2019-11-28 09:29:05

解决方案3
0 2019-11-28 09:36:04

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

问题描述

3 个解决方案

解决方案1 0 2019-11-28 09:16:47

解决方案2 0 2019-11-28 09:29:05

解决方案3 0 2019-11-28 09:36:04

解决方案1
0 2019-11-28 09:16:47

解决方案2
0 2019-11-28 09:29:05

解决方案3
0 2019-11-28 09:36:04