在哪里设置react路由器标签?

Question

我在这里读了一些答案，似乎他们都在回答一个特定的问题。我更多的是关于使用和位置，而不是我所面临的问题。我也读了文档，但它没有回答我的问题。

我的问题是在哪里使用react-router组件?

1. 我导入(和使用)BrowserRouter在index.js或App.js或它去任何地方的导航栏?
2. Route,Switch,NavLink,Link必须在同一个模块/文件中吗?如果没有，我应该在导航栏元素周围使用它们吗?
3. 在官方网站上显示<Switch>在使用<Link>元素后被包含在<BrowserRouter>标签中。我可以从<Switch>总是出现在使用<Link>元素的相同元素中得出结论吗?

我很困惑，这些标签应该在哪里使用相对于其他标签-不是如何让他们工作.

最后，如果我有一个react应用，其中index.js渲染app .js。App.js就像我正在渲染的主要组件的内容表。比如:Header, Main, Footer。在Header中有Greeting和NavigationBar。我希望我的链接作为菜单项出现在NavigationBar组件中。,我要实现react-router组件吗?

提前谢谢你。

Answer 1

1。你既可以在项目的根目录index.js中导入和使用BrowserRouter，也可以在app.js中导入和使用BrowserRouter，只要确保它包含了Switch和Routes。

2。Switch组件必须封装所有的Route组件，所以这种格式是最常用的使用方式:

<Switch>
<Route exact component={<Component />} path="/" />
</Switch>

你几乎可以在任何被导入到路由组件prop中的组件中使用NavLink或Link。

NavLink和Link只是用于在应用程序中的路由之间导航。

对于最后一部分，你可以有一个Layout.js组件，其中包含Header Main和Footer组件，包裹所有在路由中使用的其他组件，例如:

index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// Router
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
,
document.getElementById('root')
);

App.js
import React from "react";
// Router
import { Switch, Route, withRouter } from "react-router-dom";
// Components
import Home from "./routes/Home/Home";
function App() {
return (
<Switch>
<Route exact component={Home} path="/" />
</Switch>
);
}
export default App;

Home.js
import React from "react";
// Router
import { NavLink } from "react-router-dom";
// Components
import Layout from "../../components/Layout/Layout";
function Home(props) {
return (
<Layout title="Homepage">
<NavLink to="/ss">ss</NavLink>

<NavLink to="/">/</NavLink> 

</Layout>
);
}
export default Home;

在Layout.js中定义Header、Footer和Main:

Layout.js
import React, { Fragment } from "react";
import { Helmet } from "react-helmet";
// Components
import Header from "../Header/Header";
import Footer from "../Footer/Footer";
function Layout({ title, children }) {
return (
<Fragment>
<Helmet>
<title>
{title}
</title>
</Helmet>
<Header />
{children}
<Footer />
</Fragment>
);
}

export default Layout;

children prop基本上是Home.js组件，它有布局包装器，所以Home.js组件将显示布局的Header Footer和它自己的内容。

这是在react项目中使用react-router-dom最常见的方式。

注意

Switch组件只会呈现第一个匹配/包含该路径的路由。一旦它找到了第一个与路径匹配的路由，它将不再寻找任何其他匹配。不仅如此，它还允许嵌套路由正常工作，这是Router无法处理的。

Fragment只用于像这样包装组件标签:

import React , { Fragment } from 'react';
function Component() {
return (
<Fragment>
<Other />
<Main />
</Fragment>
);
}

如果你删除Fragment，它会抛出一个错误，你可以在这里阅读更多关于Fragment的信息。