React自学笔记（十一）---react动态路由的设置和get传值以及url模块的使用

最新推荐文章于 2024-05-05 21:16:31 发布

今天也要好好生活哦

最新推荐文章于 2024-05-05 21:16:31 发布

阅读量429

点赞数

分类专栏： React 文章标签： react动态路由的设置和get传值以及url模块的使用

本文链接：https://blog.csdn.net/qq_41985467/article/details/103511101

版权

本文是React自学笔记的第十一部分，主要介绍了如何设置React动态路由，包括在根页面设计新闻和商品页面，并使用Link组件。通过调用API实现新闻列表的跳转功能，探讨了两种传值方式：动态路由加载组件获取传值，适用于新闻详情页面（Content.js）；以及通过GET传值结合url模块获取URL参数，适用于商品详情页面（ProductContent.js）。

摘要由CSDN通过智能技术生成

紧接着上面的路由设置，
对于根页面进行设计：

import React, {
    Component } from 'react';
import {
   
  BrowserRouter as Router,
  // Switch,
  Route,
  Link
} from "react-router-dom";

import './assets/css/App.css';
import Home from './components/Home';
import News from './components/News';
import Product from './components/Product';
import Content from './components/Content';
import ProductContent from './components/ProductContent';
class App extends Component {
   
  constructor(props) {
   
    super(props);
    this.state = {
   

    };
  }
  //render 模板   jsx
  render() {
   
    return (
      <Router>
        <div>

          <header className="title">
          <Link to="/">首页</Link>
          <Link to="/news">新闻</Link>
          <Link to="/product">商品</Link>
          </header>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/news">
            <News />
          </Route>
          <