一、基础
- 1、引入使用
// 如果loggedIn 为 false, 则重定向跳转到 /home 页面 import {
Route, Redirect } from 'react-router' <Route exact path="/" render={
() => ( loggedIn ? ( <Redirect to="/home"/> ) : ( <User /> ) )}/> <Redirect to={
{
pathname: "/login", search: "?utm=your+face", state: {
referrer: currentLocation } }} /> 二、DOME
1、目录结构
| - index.js | - components | - App => App.js | - Home => Home.js | - About => About.js | - News => News.js 2、源码
./index.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App/App'; ReactDOM.render(<App />, document.getElementById('root')); ./components/App/App.js
import React , {
Component } from 'react'; import {
BrowserRouter as Router, Route, NavLink, Switch, Redirect } from 'react-router-dom'; import Home from '../Home/Home'; import About from '../About/About'; import News from '../News/News'; class App extends Component {
render() {
return ( <Router> <div> <li><NavLink to="/">Home</NavLink></li> <li><NavLink to="/about">About</NavLink></li> <li><NavLink to="/news">News</NavLink> </li> <br/> <Switch> <Route path="/" exact component={
Home} /> <Route path="/about" component={
About} /> <Route path="/news" component={
News} /> <Redirect from="/*" to="/" /> </Switch> </div> </Router> ); } } export default App; 
./components/About/About.js
import React, {
Component } from 'react'; export default class About extends Component {
render() {
return ( <div> <h2>About</h2> </div> ); } } ./components/New/New.js
import React, {
Component } from 'react'; export default class News extends Component {
render() {
return ( <div> <h2>News</h2> </div> ); } } 3、show
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/225232.html原文链接：https://javaforall.net
