React Routing与导航条只显示空白屏幕

Question

我一直在尝试在我的反应网站路由到不同的页面，但由于某种原因，整个页面变成空白，只要我添加任何路由。我正在使用npm和react bootstrap

这是我的代码，我试图路由到简单的页面，如主页。

App.js

import Artists from './Artists';
import Home from './Home';
import Music from './Music';
import Navigation from "./Navigation.js";
import 'react-bootstrap/dist/react-bootstrap.min.js';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Footer from './footer'
function App() {
return (
<div className="App">
<Router>
<Navigation></Navigation>
<Route exact path="/" component={Home}></Route>
<Route path="/artists" component={Artists}></Route>
<Route exact path="/music" component={Music}></Route>
</Router>
<Footer/>
</div>
);
}
export default App;

Navigation.js

import React from "react";
import { Button, Navbar, Container} from 'react-bootstrap'
import { Link, Router, Route } from "react-router-dom";
import Nav from "react-bootstrap/Nav";
import { LinkContainer } from "react-router-bootstrap";
import Artists from './Artists'
import Home from './Home'
const Navigation = () => {
return (
<Navbar bg="light" variant="light">
<Navbar.Brand>
<img src={require('.//Nothing Iconic Reccords.png')} width="135"
height="135"/>
</Navbar.Brand>
<Nav className="nav-link">
<LinkContainer to="/">
<Nav.Link>Home</Nav.Link>
</LinkContainer>
<LinkContainer to="/artists">
<Nav.Link>Artists</Nav.Link>
</LinkContainer>
<LinkContainer to="/music">
<Nav.Link>Music</Nav.Link>
</LinkContainer>
</Nav>
</Navbar>
);
};
export default Navigation;

Answer 1

尝试使用routes，把route放在routes中，并在route中添加props元素:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/artists" element={<Artists />} />
<Route path="/music" element={<Music />} />
</Routes>
</Router>

Answer 2

在你的App.js文件中，你缺少了一个叫做<Switch>的重要包装器，它包裹了你的路由(<Route>元素)。下面是描述该结构的快速入门指南。

<Router>
<Switch>
<Route path="/about">
<About />
</Route>
</Switch>
</Router>

如果没有这个包装器(或者文档中描述的类似的包装器)，react router就不知道你想要应用什么匹配逻辑，所以它不能渲染特定的页面/路由。

如果你使用的是React router 6(最新版本)，那么整个语法需要重写。

For React router 6(最新版本)你必须这样安排你的路线:

<BrowserRouter>
<Routes>
<Route path="/" element={<App />}/>
</Routes>
</BrowserRouter>

这是关于

的更深入的链接

Answer 3

您需要仔细阅读react-router-dom文档。根据文档，

如果你使用最新版本的react-router-dom，也就是@6.3.0，你必须使用{Routes}而不是{Switch}。否则，对于旧版本的react-router-dom，您可以使用{Switch}。

1. 你必须从"react-router-dom"中导入{BrowserRouter as Router, Switch, Route}
2. 你只需要把各自的路由封装在Router元素中，而把其他组件留在元素(即component)之外。
3. 你需要在标签内以HTML元素的形式编写组件。

你的App.js文件看起来应该和下面的一样:

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Artists from './Artists';
import Home from './Home';
import Music from './Music';
import Navigation from "./Navigation.js";
import 'react-bootstrap/dist/react-bootstrap.min.js';
import Footer from './footer'
export default function App() {
return (
<Router>
<div>
<Navigation/>
<Switch>
<Route exact path="/" component={<Home />} />
<Route path="/artists" component={<Artists />} />
<Route exact path="/music" component={<Music />} />
</Switch>
</div>
</Router>
);
}

export default App

如果你想在某些操作上获得一个特定的组件，比如onClick，比如在导航组件中，你只需要从"react-router-dom"中导入{LinkContainer}或{Link}，因为Link和LinkContainer的行为方式是一样的。因此，您不需要在单个文件中同时导入它们。在Navigation.js文件中导入Router和Route没有任何意义。因为你没有在Navigation.js文件中使用任何Artist和Home组件，所以你不需要将它们导入到Navigation.js中。

你的Navigation.js文件应该和下面的一样:

import { link } from "react-router-dom"
import React from "react";
import { Button, Navbar, Container} from 'react-bootstrap'
import Nav from "react-bootstrap/Nav";
const Navigation = () => {
return (
<Navbar bg="light" variant="light">
<Navbar.Brand>
<img src={require('.//Nothing Iconic Reccords.png')} width="135" 
height="135"/>
</Navbar.Brand>
<Nav className="nav-link">
<LinkContainer to="/">
<Nav.Link>Home</Nav.Link>
</LinkContainer>
<LinkContainer to="/artists">
<Nav.Link>Artists</Nav.Link>
</LinkContainer>
<LinkContainer to="/music">
<Nav.Link>Music</Nav.Link>
</LinkContainer>
</Nav>
</Navbar>
);
};
export default Navigation;