SoFunction
Updated on 2025-04-04

Detailed explanation of react routing Link configuration

1. Link's to attributes

(1) Put the routing path
(2) Place objects, and are in a prescribed format
{pathname:"/xx",search:'?key value pair',hash:"#xxx",state:{key value pair}}
The pathname, search, and hash will be automatically spliced ​​on the url path, and state is the passed parameter
You can view information in the object by outputting props
.Key name to get data in state

2. Link's replace attribute

Add replace to replace the previous page before jump with the current page, and only the current page is put into the stack.

3. Link transmission

Add "/key value" after the to path
Add "/:key name" after route route and path path
In the component, the functional component: first pass in the props parameter, then the key name.
Class component:.key name

Code example:

import React,{Component} from 'react'
//import {Route,BrowserRouter,Link} from 'react-router-dom'
//Rename BrowserRouter to Routerimport {BrowserRouter as Router,Link,Route} from 'react-router-dom'
import { Button } from 'antd';
import './';

function Home()
{
  return(
      <div>adminfront page</div>
    )
}

function Me(props)
{
  (props)
  return(
      <div>adminmine</div>
    )
}

function Product(props)
{
  return(
      <div>adminProduct Page:{}</div>
    )
}

export default class App extends Component{
   constructor()
    {
      super();
    }
    render()
    {
    {/*If the path is written as an object form, and the same as below, the pathname, search, and hash will be automatically spliced ​​on the url path, and the state is the data passed to the component*/}
      let obj={pathname:"/me",search:'?username=admin',hash:"#abc",state:{msg:'hello'}}
      return(
        <div id='app'>
      {/*BrowserRouter can put multiple */}
          <Router>
        
        {/*Because the component also returns html content, you can directly return html content through the function to act as a component, but you cannot directly write html content*/}
          <div>  
            <Route path="/"  exact component={()=><div>front page</div>}></Route>
            <Route path="/product"  component={()=><div>product</div>}></Route>
            <Route path="/me"  component={()=><div>me</div>}></Route>
          </div>
          {/*<Route path="/" component={function(){return <div>Home 2</div>}}></Route>*/}

          &lt;/Router&gt;
        

          
          {/*There can only be one root container inside the BrowserRouter to wrap other content*/}
        {/*After adding basename='/xx', when clicking Link to jump to other routes, url will add /xx to the front of the route name, so both the route path and the route path with admin added can match the route*/}
          &lt;Router basename='/admin'&gt;
            &lt;div&gt;
                &lt;div className='nav'&gt;
                    &lt;Link to='/'&gt;Home&lt;/Link&gt;
                    &lt;Link to='/product/123'&gt;Product&lt;/Link&gt;
                  {/*You can output props in the corresponding component to view the information of the incoming object, add replace to replace the previous page before jump with the current page, and only put the current page on the stack*/}
                    &lt;Link to={obj} replace&gt;Personal Center&lt;/Link&gt;
                &lt;/div&gt;

                &lt;Route path="/" exact component={Home}&gt;&lt;/Route&gt;
                &lt;Route path="/product/:id"  component={Product}&gt;&lt;/Route&gt;
                &lt;Route path="/me" exact component={Me}&gt;&lt;/Route&gt;
            &lt;/div&gt;
          &lt;/Router&gt;

        &lt;/div&gt;
        
      )
    }
}

This is the end of this article about the detailed explanation of react routing Link configuration. For more related react routing Link content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!