React 路由基本配置

Posted loaderman

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React 路由基本配置相关的知识,希望对你有一定的参考价值。

app.js

/*

  react路由的配置:
    1、找到官方文档 https://reacttraining.com/react-router/web/example/basic

    2、安装  cnpm install react-router-dom --save


    3、找到项目的根组件引入react-router-dom

       import { BrowserRouter as Router, Route, Link } from "react-router-dom";

    4、复制官网文档根组件里面的内容进行修改  (加载的组件要提前引入)


         <Router>

                <Link to="/">首页</Link>

                <Link to="/news">新闻</Link>

                <Link to="/product">商品</Link>


               <Route exact path="/" component={Home} />
               <Route path="/news" component={News} />    
               <Route path="/product" component={Product} />   
         </Router>


         exact表示严格匹配
         
*/



import React, { Component } from ‘react‘;

import { BrowserRouter as Router, Route, Link } from "react-router-dom";


import ‘./assets/css/index.css‘

import Home from ‘./components/Home‘;
import News from ‘./components/News‘;
import Product from ‘./components/Product‘;

class App extends Component {

  render() {
    return (
        <Router>
          <div>           

              <header className="title">
              
                <Link to="/">首页</Link>

                <Link to="/news">新闻</Link>

                <Link to="/product">商品</Link>

              </header>


               <br />
               <hr />
      
               <br />
      
      
              <Route exact path="/" component={Home} />
              <Route path="/news" component={News} />    
              <Route path="/product" component={Product} />                 
          </div>
      </Router>
    );
  }
}

export default App;

 

以上是关于React 路由基本配置的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段11——vue路由的配置

使用具有不同片段字段的相同中继根查询的多个 react-router-relay 路由

导致资产预编译在heroku部署上失败的代码片段

使用 Relay 和 React-Native 时的条件片段或嵌入的根容器

[react] Module not found: Can't resolve 'schedule' in 'C:Usersadcaldvmtn7myapp (代码片段

react-router 学习笔记