时间戳

首页 > 解决方案 > 如何在 reactjs 的不同组件中编写链接和路由

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

问题描述

我想在不同的组件中使用 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;

注意：我检查了这个链接，但这还不够我的答案。 如何在 ReactJS 的两个组件中使用 Route 和 Link

标签： javascriptreactjsreact-routercomponentsrouter

解决方案

您导入的模块不正确。

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 作为路由器导入时。

推荐阅读