如何在 reactjs 的不同组件中编写链接和路由
Posted
技术标签:
【中文标题】如何在 reactjs 的不同组件中编写链接和路由【英文标题】：How can I write Link and Route in different component in 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
【问题讨论】：
【参考方案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
【讨论】：
以上是关于如何在 reactjs 的不同组件中编写链接和路由的主要内容，如果未能解决你的问题，请参考以下文章