如何在react中使用不同的路由？
在React中使用不同的路由可以通过React Router库来实现。React Router是一个用于构建单页面应用的第三方库，它提供了一些组件和API来管理应用的路由。
首先，需要安装React Router库。可以使用npm或者yarn来安装：
npm install react-router-dom或者
yarn add react-router-dom安装完成后，可以在项目中引入React Router的相关组件和API。
- 首先，在根组件中引入BrowserRouter组件，并将整个应用包裹在BrowserRouter组件中。BrowserRouter使用HTML5的history API来实现路由的切换。
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);- 在App组件中，可以定义路由的配置和对应的组件。可以使用Route组件来定义路由规则，并指定对应的组件。
import { Route } from 'react-router-dom';
function App() {
return (
<div>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
);
}上面的代码中，定义了三个路由规则，分别对应路径为"/"、"/about"和"/contact"的路由。当用户访问不同的路径时，对应的组件将会被渲染。
- 在需要导航到不同路由的地方，可以使用Link组件来创建链接。
import { Link } from 'react-router-dom';
function Navigation() {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
);
}上面的代码中，创建了三个链接，分别对应路径为"/"、"/about"和"/contact"的路由。
通过以上步骤，就可以在React中使用不同的路由了。当用户点击链接或者手动输入URL时，React Router会根据路由规则来渲染对应的组件。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云负载均衡（CLB）。
相关·内容
这是我的main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import Home from './Home.jsx';
import Contact from './Contact.jsx';
import About from './About.jsx';
import { BrowserRouter as Router, Route, IndexRou
浏览 0提问于2017-09-19得票数 0
大家好，我在学反应。我已经在Headers.js上为路由编写了代码，并添加了链接以显示在导航栏上。我想在页脚上显示相同的链接，所以我创建了footers/index.js。我在src/index.js上导入了footers/index.js和头，不幸的是，页面内容在根页面上显示了两次，一次用于页眉，另一次用于页脚，如这个url所示：
Headers.js
import React from 'react';
import {BrowserRouter, Route, Switch, Link} from 'react-router-dom';
import
浏览 5提问于2017-09-20得票数 0
回答已采纳
我对反应是陌生的。我对从外部js文件进行路由有问题。
这是我在top- code er.js中的导航文件代码。
import React from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';
function Header(props) {
return <div>
<ul>
<Router>
<li><Link to="/">Home
浏览 1提问于2020-11-11得票数 0
1回答
必须指定“to”属性
、、、
我正在尝试使用Link而不是锚标记。在这个Link标记中，我使用的是to属性，但它会给我带来错误，例如，“您必须指定'to‘属性”。
Nav.jsx码
import React from "react";
import { Link, NavLink } from "react-router-dom";
const Navbar = () => {
return (
<nav className="nav-wrapper grey darken-3">
<div className="container
浏览 0提问于2019-01-30得票数 2
回答已采纳
1回答
React路由器没有渲染我的JSX。它不显示组件的内容。它呈现一个空白页面。 下面是我的根组件： import React, { Component } from 'react'
import Navbar from './components/Navbar'
import { BrowserRouter, Route } from 'react-router-dom'
import Home from './components/Home'
import About from './components/About&#
浏览 39提问于2019-09-16得票数 2
当我在导航栏组件上使用link时，它会改变url但不会改变组件，但在我重新加载时它会改变组件，当我把link放在主app.js中时，它会完美地路由
app.js
import './App.css';
import Navbar from './Navbar/Navbar'
import About from './About/About'
import { Route, Link, BrowserRouter as Router ,Switch} from 'react-router-dom'
function App() {
浏览 1提问于2021-04-10得票数 0
我尝试使用JSX在ReactJS中开发非常简单的应用程序。我安装了react-router-dom并实现了以下代码：
App.Js
import React, { Component } from 'react';
import './App.css';
import { Header } from './app/header';
import { Footer } from './app/footer';
import { Menu } from './app/menu';
import { BrowserRou
浏览 1提问于2019-02-27得票数 0
回答已采纳
我的文件夹结构
reactdemo
|------------>public
|------------>src
|------->Component
|------->index.js
<
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-route
浏览 0提问于2018-04-02得票数 0
回答已采纳
如果我点击一个导航链接，我可以看到弹格已经改变了，但组件没有呈现。我必须手动刷新页面以查看组件，而页面应该在路由/段塞更改时自行重新呈现。
App.js
import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Me from './components/me';
import Contrib from './components/contrib';
import
浏览 2提问于2018-11-26得票数 8
回答已采纳
2回答
我正在尝试学习react路由配置。我在一个地方添加所有的导航链接，这是入口点index.js，我的期望是当有人在导航过程中对配置的路径做出反应时，相应的组件应该加载到浏览器中。我将所有路由路径添加到我的入口文件index.js中，如下所示：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js';
import { BrowserRouter, Route, hashHistory } from 'react-route
浏览 18提问于2018-02-15得票数 6
1回答
如果我想从"react-router": "^2.0.0"升级到"react-router": "^4.0.0","react-router-dom": "^4.0.0"。我的结构应该是这样：
主组件:是每个事物(父组件)的容器组件。
Nav组件:用于在其他子组件之间导航，并且应该始终显示该组件。
子组件:示例，关于，测试。其中测试是默认的。
我的旧代码按预期工作如下：
-App.jsx
var {Route, Router, IndexRoute, hashHistory}
浏览 4提问于2017-04-28得票数 3
回答已采纳
我试图在我的reactjs应用程序中使用react路由器。我遇到了这个问题：
这就是我想做的：
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import About from '../Pages/About';
import Home from '../Pages/Home';
import Topics from '../Pages/T
浏览 2提问于2018-10-05得票数 1
我试图在一个独立于菜单导航元素的元素中呈现内容，但它始终呈现在与菜单栏相同的元素中。我试着把连接从路由器中分离出来，但后来发现了错误。
下面是我的路由器组件，我将它导入到我的输入文件中：
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import {BrowserRouter as Router, Route, Link, StaticRouter} from 're
浏览 5提问于2017-06-13得票数 0
回答已采纳
我是react的新手，我只是想知道如何将用户从404错误页面重定向到主页这是我在GitHub The project Github repository 上的项目代码库 这是我的路线代码 import React, {Component} from 'react';
import { BrowserRouter, Route, Switch, Link, Redirect } from 'react-router-dom';
import Home from './components/home';
import About from
浏览 9提问于2019-01-17得票数 1
2回答
我试着做一个海军酒吧，但并不是重定向到给定的页面。如果我单击Navbar中的任何链接，它将更改url栏中的路径，但不会重定向到该页面。我不确定我是不是错过了什么。当我用标签代替它时，它工作得很完美。
Navbar.js
import React from "react";
import { BrowserRouter as Router, Link, Switch } from "react-router-dom";
const Navbar = () => {
return (
<Router>
<Switch
浏览 3提问于2020-05-25得票数 0
回答已采纳
1回答
目标：
在Testtt.js网页上显示名为数据(来自状态管理)的变量的值
问题：
我犯了两个错误：
1.
当我应用url "“时，会得到一个错误，即‘无法读取未定义的属性’匹配‘。
2.
网页"“创建了一个奇怪的url，即"”。
当变量是一个数字时，我不知道怎么可能这样做。
我不知道怎么解决它，我错过了什么部分？
斯塔克布利茨：
信息：
我是ReactJS的新手
谢谢!
app.js
import React from 'react';
import './style.css';
import React, { Component }
浏览 1提问于2021-08-07得票数 1
回答已采纳
1回答
问题是，当我试图直接复制一条路由时，我会得到以下错误：
不能回家
但是，当我使用我通常呈现视图的菜单项导航时，我尝试了几种作为browserHistory的方法来实现这种效果，但我没有成功，我想知道，如果react-router-dom不允许在URL中直接导航，还是在我的代码中出现了错误：
// Dependencies
import React, { Component} from 'react'
import { render } from 'react-dom'
import { BrowserRouter as Router, Route,
浏览 2提问于2017-11-08得票数 0
基本上，我正在学习react-router-dom，version 5.0.0的React路由，我有一些组件，如主页，关于，联系等，我试图通过单击NavLink来更改每个组件，而不是更改组件，只是更改URL
索引：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './Style.css';
import App from './App';
import * as serviceWor
浏览 35提问于2019-03-28得票数 0
回答已采纳
我得到了下面的错误。我已经在命令提示符上安装了npm，安装了react路由器-dom。这是我的app.js和index.js代码
错误：
A只被用作元素的子元素，从未直接呈现。请把你的包起来。
请让我知道我还需要添加什么来使代码正常工作。
**App.Js**
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const Home = () => {
return (
浏览 3提问于2022-08-30得票数 0
对于响应路由器来说，我的问题是如何在已经呈现的其他布局中呈现一个特定的组件(我有两个组件侧栏和我只想要的内容，如果我单击侧栏中的任何链接，我们将呈现的组件已经呈现内容组件，而不是覆盖该组件)。
////////////Sidebar.js////////////
import React from 'react'
import { BrowserRouter, Link } from 'react-router-dom'
import PersonalImg from '../images/personal.gif'
const Sideba
浏览 2提问于2019-09-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
