React Router v5 - Get the template of the current route

Asked
Active3 hr before
Viewed126 times

7 Answers

templatecurrentrouterouterreact
90%

import React from 'react'
import ReactDOM from 'react-dom'
import { useParams } from 'react-router-dom'

function BlogPost() {
  // We can call useParams() here to get the params,
  // or in any child element as well!
  let { slug } = useParams()
  // ...
}

ReactDOM.render(
  <Router>
    <div>
      <Switch>
        {/* No weird props here, just use
            regular `children` elements! */}
        <Route path="/posts/:slug">
          <BlogPost />
        </Route>
      </Switch>
    </div>
  </Router>,
  document.getElementById('root')
)
load more v
88%

The <Route> component is the most important component in React Router. It renders some UI if the current location matches the route’s path. Ideally, a <Route> component should have a prop named path, and if the path name matches the current location, it gets rendered.,render: handy for inline rendering. The render prop expects a function that returns an element when the location matches the route’s path.,Note that when using the component prop to render a route, the match, location and history route props are implicitly passed to the component. When using the newer route rendering pattern, this is not the case.,children: this is similar to render, in that it expects a function that returns a React component. However, children gets rendered regardless of whether the path is matched with the location or not.

Routing is the process of keeping the browser URL in sync with what’s being rendered on the page. React Router lets you handle routing declaratively. The declarative routing approach allows you to control the data flow in your application, by saying “the route should look like this”:

<Route path="/about">
   <About />
</Route>
load more v
72%

2. Creating your first Routes using Switch,All you need to know about using React.js react-router-dom package and how to use it (with code and result GIF examples).

All you need to know about using React.js react-router-dom package and how to use it (with code and result GIF examples).

react - router - dom
65%

With React router v5, routing is not centralized anymore instead it becomes a part of the rest of the app layout and UI.,BrowserRouter: This is a sub-class or a concrete implementation of Router interface that makes use of HTML5 history API to sync your UI with the current browser's url or actually the url's path i.e window.location.,isExact: equals True if path equals exacly the current location's path-name.,As you can see, it's very easy to use the React Router v5 components to create apps with routing.

npm install--save react - router - dom
load more v
75%

Routing refers to keeping a webpage up to date with the current url, and vice-versa.,Describe the following components: Route Redirect Link NavLink Switch ,Why do you think the Home page is rendering at /puppies?,Understand and articulate the need for routing

git clone https: //github.com/turingschool-examples/react-router-v5
   cd react - router - v5
npm i
npm start

# open your text editor
load more v
40%

Hi nero, I was wondering how to make a protected route using react-router hooks ?? thanks,Note: Passing state through react-router's <Link> isn't a new feature, it has been there since I started using React. ,withRouter as this.props.match,Nice to see, but I do not understand the last hook, can you introduce me more?

// <= V5.0

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

const Portfolio = props => {
    const { match } = props;

    let {id} = match.params;
    return (
        <div>
            Portfolio component
            <p>Url params: {id}</p>
        </div>
    );
};

function App() {
    return (
        <div className="App">
            <Router>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/contact">Contact</Link>
                    </li>
                    <li>
                        <Link to="/portfolio/6">Portfolio</Link>
                    </li>
                </ul>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/portfolio/:id" component={Portfolio} />
                    <Route path="/contact" component={Contact} />
                </Switch>
            </Router>
        </div>
    );
}
load more v
22%

In addition, both methods only provide access to the params in <BlogPost>, so you're forced to manually pass them along to components further down the tree if you need them.,Let's see how useParams fixes all of these problems for us:,We don't have to do any weird component composition tricks to get the params, we can just use regular children elements,Replace any "floating" (not inside a <Switch>) <Route> elements with useRouteMatch

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

// In the code below, BlogPost is used as both a <Route component>
// and in a <Route render> function. In both cases, it receives a `match`
// prop, which it uses to get the URL params.
function BlogPost({ match }) {
  let { slug } = match.params
  // ...
}

ReactDOM.render(
  <Router>
    <div>
      <Switch>
        {/* Using the `component` prop */}
        <Route path="/blog/:slug" component={BlogPost} />

        {/* Using the `render` prop */}
        <Route
          path="/posts/:slug"
          render={({ match }) => <BlogPost match={match} />}
        />
      </Switch>
    </div>
  </Router>,
  document.getElementById('root')
)
load more v

Other "template-current" queries related to "React Router v5 - Get the template of the current route"