【react-router】Redirect组件

最新推荐文章于 2024-04-04 20:05:51 发布

richest_qi

最新推荐文章于 2024-04-04 20:05:51 发布

阅读量392

点赞数

分类专栏： React16

本文链接：https://blog.csdn.net/qzw752890913/article/details/107891953

版权

React16 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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

export default function App() {
  return (
        <Router>
        <ul>
            <li><Link to="/home">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/users">Users</Link></li>
        </ul>
        <Redirect from="/" to="/home"/>
        <Route path="/about"><About/></Route>
        <Route path="/users"><Users/></Route>
        <Route path="/home"><Home/></Route>
        </Router>
  );
}

function Home(){
    return <h2>Home</h2>
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

<Redirect to/>
to属性既可以是一个字符串，也可以是一个对象。

to属性是一个字符串

<Router>
    <ul>
        <li><Link to="/home">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/users">Users</Link></li>
    </ul>
    <Redirect from="/" to="/home"/>
    <Route path="/about"><About/></Route>
    <Route path="/users"><Users/></Route>
    <Route path="/home"><Home/></Route>
</Router>

或者

<Router>
    <ul>
        <li><Link to="/home">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/users">Users</Link></li>
    </ul>

    <Route path="/about"><About/></Route>
    <Route path="/users"><Users/></Route>
    <Route path="/home"><Home/></Route>
    <Route path="/">
        <Redirect to="/home"/>
    </Route>
</Router>

to属性是一个对象

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

export default function App() {
  return (
    <Router>
        <ul>
            <li><Link to="/home">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/users">Users</Link></li>
        </ul>
        <Redirect from="/" 
                to={{
                    pathname:"/home",
                    state:{
                        from:"/"
                    },
                    a:{
                        b:"hellow world"
                    }
                }}/>
        <Route path="/about"><About/></Route>
        <Route path="/users"><Users/></Route>
        <Route path="/home"><Home/></Route>
    </Router>
  );
}

function Home(){
    const location = useLocation();
    console.log(location);
    return <h2>Home</h2>
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}