Consulte el documento oficial: REACT-Router documentos oficiales
ReactRouter es una aplicación front-end de enrutamiento, el enrutamiento principio en el extremo delantero del suplemento de seguimiento
Router nuevas versiones v5, ReactRouter incluye tres bibliotecas: reaccionar-router, reaccionar de enrutador dom y reaccionar de enrutador nativa.
reaccionará-router proporciona funciones básicas de enrutamiento, el uso real, no vamos a ser instalado directamente reaccionar-router, pero dependiendo del entorno de aplicación en ejecución elija instalar reaccionar de enrutador dom (utilizando un navegador) o reaccionar de enrutador nativa (en el reaccionan nativo). reaccionar de enrutador dom y reaccionar de enrutador nativa dependen del router reaccionar, de manera que durante la instalación, reacciona-router se instala automáticamente.
Nota: reaccionar router siga siendo la idea que todo asambleas
Utilice el cliente de navegador
1. Instalar
hilo add reaccionar de enrutador dom
Nota: Reaccionar Router + v4 es una reconstrucción minuciosa de React router, utilizando enrutamiento dinámico, siga reaccionar de todos los componentes se cree, cada ruta (ruta) es un común Reaccionar componentes, por lo v4 + versión no es compatible con ReactRouter anterior edición
2. Routers
Router ReactRouter de enrutamiento completa a través de los dos componentes y de la ruta
Todos los componentes de la configuración de enrutamiento se definen como la ruta Router subcomponentes
En las aplicaciones Web, el uso general del router será BrowserRouter o HashRouter dos componentes envasados fuera
BrowserRouter uso de HTML historia API de 5 (pushState, replaceState etc.) de interfaz de usuario de sincronización y el URL de la aplicación.
HashRouter utilizar la interfaz de usuario de sincronización URL hash y la dirección URL de la aplicación.
2.1 Componentes Router
Enrutador crea una historia objetos, la historia se utiliza para realizar un seguimiento de URL, cuando cambia la URL, componentes descendencia Router serán re-renderizados.
Otros componentes proporcionados ReactRouter se pueden obtener a través del contexto del historial de objetos, esto también implica ilustra otros componentes ReactRouter debe utilizarse como los descendientes de este componente Router componente. Router, pero sólo puede tener un solo hijo, este componente pueden ser componentes personalizados o las primeras etiquetas html
// 正确
ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>), document.getElementById('root'))
// 错误，Router 中包含两个子元素
ReactDOM.render((
<BrowserRouter>
<App1 />
<App2 />
</BrowserRouter> ),document.getElementById('root'))3. Configuración de enrutamiento
Ruta es la componente de frecuencia más alta, el componente cada vez que hay una necesidad de determinar si la URL cuando se representa, es necesario crear una ruta, componentes de ruta en varios atributos en común: ruta y el componente y hacer, los niños, exacta, al mismo tiempo, los componentes y hacer , los niños propiedad también se hacen camino recorrido componente, ruta exacta de una coincidencia exacta y la coincidencia parcial
3.1 atributo ruta
Para configurar los saltos de enrutamiento
Cuando una URL coincide con la ruta, que define la ruta serán prestados componentes;
Por el contrario, la ruta no se representa (excepto por el uso de la propiedad hijos rendir componente de la ruta)
Cuando se utiliza BrowserRouter, ruta se utiliza para describir un nombre de ruta de un URL a juego de la ruta;
Al utilizar HashRouter, ruta se utiliza para describir la URL de la coincidencia hash de la ruta
3.2 propiedades de los componentes
Un componente para la representación en una trayectoria coincidente,
Componente es un componente de valor, y cuando el URL que coincida con la ruta, se representará componente de definición de atributo componente
<Route path='/foo' component={Foo}>Cuando URL = "http://example.com/foo", se representarán componentes Foo
3.3 rendir propiedad
Render el valor es una función se puede hacer pasar un parámetro apoyos, esta función devuelve un elemento de reaccionar, se puede transferir fácilmente a los atributos adicionales de componentes para ser prestados, pero también puede ser un componente de la ruta anidada re-renderizados actual, se dice a menudo secundario, y rutas terciarias, etc.
<Route path='/foo' render={(props) =>( <Foo {...props} data={extraProps} /> )}>Foo componente recibe una propiedad adicional de datos
propiedad de 3,4 hijos
El valor de los niños es también una función, los apoyos puede pasar un parámetro, la función devuelve Reaccionar elementos a ser prestados. La diferencia es que a diferencia de los otros dos, independientemente de si el partido tiene éxito, los niños vuelven componente se representará
<Route path='/foo' children={(props) => ( <div> <Foo /> </div> </Route>
establecimiento de 3.5 partido
URL ruta coincidente y cuando, un partido de ruta creada objeto al conjunto se representa como un atributo de los puntales, mientras que el objeto contiene la siguiente cuatro propiedades
(1) params: la ruta de los parámetros de ruta pueden incluir, por ejemplo, <RoutePath = '/ foo /: id'> comprende un identificador de parámetro. params se utiliza para resolver el URL coincide con los parámetros de la ruta, por ejemplo, cuando un URL = "http://example.com/foo/1", params = {id: 1}.
(2) isExact: es un valor booleano, cuando la URL coincide exactamente con el valor de verdad, cuando una parte del valor de coincidencia URL es falsa. Por ejemplo, cuando la ruta = "/ foo", URL = "http://example.com/foo", una coincidencia exacta; URL = tiempo cuando "http://example.com/ foo / 1", una coincidencia parcial .
(3) path: Ruta propiedad camino será usado para construir el enrutamiento anidada.
(4) url: URL de la porción coincidente
Demostración del uso de la propiedad en la parte superior, y sacado todas las rutas a un archivo de ruta, gestión unificada de todas las rutas
1. Crear un directorio tras proyecto andamios
enrutamiento de instalación
hilo add reaccionar de enrutador dom
app.js
import React from "react";
function App() {
return (
<div className="App">
<header className="App-header">我是App组件</header>
</div>
);
}
export default App;router.js (este archivo para todo el archivo de configuración de enrutamiento, todas las rutas para la carga síncrona)
import React from "react";
import { Route, BrowserRouter } from "react-router-dom";
// 引入组件
import App from "./App";
import SheQu from "./components/SheQu";
import Mine from "./components/Mine";
import News from "./components/News";
const AppRouter = () => (
<BrowserRouter>
<Route component={App} path="/" />
<Route component={SheQu} path="/sq" />
<Route component={Mine} path="/mine" />
<Route component={News} path="/news" />
</BrowserRouter>
);
export default AppRouter;index.js
import React from "react";
import ReactDOM from "react-dom";
import AppRouter from "./router";
ReactDOM.render(<AppRouter />, document.getElementById("root"));compoent contenido de las carpetas de archivos son los mismos
Mine.js, News.js, SheQu.js
import React, { Component } from "react";
export class Mine extends Component {
render() {
return <div>个人中心</div>;
}
}
export default Mine;Elementos de inicio
inicio del hilo
Se puede ver, la página se ha demostrado para hacer la ruta, la representación predeterminada "/", que es la ruta predeterminada
modificar manualmente la ruta, la página se cambió de nuevo en la barra de direcciones, como por ejemplo el cambio a "/ mina de" camino
Pero la pregunta es, no importa cómo varios caminos después de cambiar, el contenido se representará Aplicación de montaje, lo que requiere el uso de los componentes de propiedad exacta y el interruptor de la Ruta de la
Cuando URL y más partido de la ruta, la ruta llevará a cabo operaciones de renderización. Si desea realizar el primer partido de la Ruta de representación, puede utilizar estos paquetes a un conmutador de ruta de montaje. Si desea que la URL y la ruta coincidencia exacta, la ruta se vuelven, se puede utilizar la ruta exacta atributos, Switch y exacta menudo se utiliza en combinación
Modificar router.js, el montaje y el uso del interruptor exacta
import React from "react";
import { Route, BrowserRouter, Switch } from "react-router-dom";
// 引入组件
import App from "./App";
import SheQu from "./components/SheQu";
import Mine from "./components/Mine";
import News from "./components/News";
const AppRouter = () => (
<BrowserRouter>
<Switch>
<Route component={App} path="/" exact />
<Route component={SheQu} path="/sq" />
<Route component={Mine} path="/mine" />
<Route component={News} path="/news" />
</Switch>
</BrowserRouter>
);
export default AppRouter;En este caso de trayectorias de conmutación manualmente, es normal
Uso render función o hijos función en lugar de atributos del componente, este enfoque todavía puede hacer más adelante
import React from "react";
import { Route, BrowserRouter, Switch } from "react-router-dom";
// 引入组件
import App from "./App";
import SheQu from "./components/SheQu";
import Mine from "./components/Mine";
import News from "./components/News";
const AppRouter = () => (
<BrowserRouter>
<Switch>
{/* <Route children={() => <App />} path="/" exact /> */}
<Route render={() => <App />} path="/" exact />
<Route component={SheQu} path="/sq" />
<Route component={Mine} path="/mine" />
<Route component={News} path="/news" />
</Switch>
</BrowserRouter>
);
export default AppRouter;4. ruta de salto
Enlace y NavLink están vinculados componente Reaccionar Router proporciona un enlace define componente cuando se hace clic en el enlace, la página debe ser la forma de ruta
atributos comunes NavLink
activeClassName: seleccionado por el nombre de la clase de enrutamiento por defecto
Un ctiveStyle: ruta seleccionada por el estilo por defecto, es un objeto
a: Saltar a la trayectoria
Enlace atributos:
a: Cadena de ruta || salto de objetos
Modificar app.js
import React, { Component } from "react";
import { Link } from "react-router-dom";
export class App extends Component {
render() {
return (
<div>
<ul>
<li>
<Link to="/news">新闻</Link>
</li>
<li>
<Link to="/mine">我的</Link>
</li>
<li>
<Link to="/sq">社区</Link>
</li>
</ul>
{this.props.children}
</div>
);
}
}
export default App;
router.js Modificar
import React from "react";
import { Route, BrowserRouter, Switch } from "react-router-dom";
// 引入组件
import App from "./App";
import SheQu from "./components/SheQu";
import Mine from "./components/Mine";
import News from "./components/News";
const AppRouter = () => (
<BrowserRouter>
<App>
<Switch>
<Route component={SheQu} path="/sq" exact />
<Route component={Mine} path="/mine" />
<Route component={News} path="/news" />
</Switch>
</App>
</BrowserRouter>
);
export default AppRouter;Actualizar la página, haga clic en las noticias, ya se puede saltar
componentes de redirección utilizando ruta de redirección de noticias seleccionados por defecto
import React from "react";
import { Route, BrowserRouter, Switch, Redirect } from "react-router-dom";
// 引入组件
import App from "./App";
import SheQu from "./components/SheQu";
import Mine from "./components/Mine";
import News from "./components/News";
const AppRouter = () => (
<BrowserRouter>
<App>
<Switch>
<Route component={SheQu} path="/sq" exact />
<Route component={Mine} path="/mine" />
<Route component={News} path="/news" />
<Redirect to="/news" />
</Switch>
</App>
</BrowserRouter>
);
export default AppRouter;La parte posterior ruta para vaciar la barra de direcciones, refrescar, seleccionada por defecto correspondientes componentes de noticias
método de salto
history.push () y history.replace método ()
Modificar app.js, debido componentes de la aplicación no se trata como el componente de enrutamiento, es sólo un paquete de enrutamiento de contenedores anidados, por lo que no existe una historia de un objeto de enrutamiento en este componente, que requiere el uso withRouter el componente de orden superior y el componente de enrutamiento la unión entrar, se puede obtener una impresión this.props objetos de la historia,
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
export class App extends Component {
render() {
console.log(this.props);
const { history, children } = this.props;
return (
<div>
<ul>
<li
onClick={() => {
history.push("/news");
}}
>
新闻
</li>
<li
onClick={() => {
history.push("/mine");
}}
>
我的
</li>
<li
onClick={() => {
history.push("/sq");
}}
>
社区
</li>
</ul>
{children}
</div>
);
}
}
export default withRouter(App);
Vacío, actualización, haga clic en, saltar la ruta continúa.
5. Con respecto a la página 404, se añade directamente un componente, sin ningún camino en la línea <componente Ruta = {NoMatch} / >
import React from "react";
import { Route, BrowserRouter, Switch, Redirect } from "react-router-dom";
// 引入组件
import App from "./App";
import SheQu from "./components/SheQu";
import Mine from "./components/Mine";
import News from "./components/News";
import NoMatch from "./components/AppChild";
const AppRouter = () => (
<BrowserRouter>
<App>
<Switch>
<Route render={() => <SheQu />} path="/sq" exact />
<Route component={Mine} path="/mine" />
<Route component={News} path="/news" />
<Route component={NoMatch} />
<Redirect to="/news" />
</Switch>
</App>
</BrowserRouter>
);
export default AppRouter;6. parámetro de enrutamiento de paso
app.js
history.push ( "? / noticias id = 10");
import React, { Component } from "react";
import { withRouter, Link } from "react-router-dom";
export class App extends Component {
render() {
const { history, children } = this.props;
return (
<div>
<ul>
<li
onClick={() => {
history.push("/news?id=10");
}}
>
新闻
</li>
<li>
<Link to="/mine/10"> 我的</Link>
</li>
<li
onClick={() => {
history.push("/sq");
}}
>
社区
</li>
</ul>
{children}
</div>
);
}
}
export default withRouter(App);
News.js
import React, { Component } from "react";
export class News extends Component {
render() {
console.log(this.props);
return <div>我是news 新闻</div>;
}
}
export default News;Y luego la obtención de parámetros de localización de enrutamiento dinámico, véase el ejemplo oficial, no se trabajará en lo siguiente
Algunos integración del conocimiento de enrutamiento, para detener la práctica de proyectos reales
En primer lugar, noticias, comunidad, mi, 404 páginas, detalla la página de noticias, tabla de contenidos de la siguiente
index.js
import React from "react";
import ReactDOM from "react-dom";
import AppRouter from "./router";
ReactDOM.render(<AppRouter />, document.getElementById("root"));app.js
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import "./css/app.css";
export class App extends Component {
constructor(props) {
super(props);
this.state = {
navList: [
{
id: 1,
name: "首页",
path: "/"
},
{
id: 2,
name: "新闻",
path: "/news"
},
{
id: 3,
name: "社区",
path: "/sq"
},
{
id: 4,
name: "我的",
path: "/mine"
}
]
};
}
render() {
const { children } = this.props;
const { navList } = this.state;
return (
<div className="app">
<ul>
{navList.map(item => (
<li
key={item.id}
onClick={() => this.props.history.push(item.path)}
>
{item.name}
</li>
))}
</ul>
<div>{children}</div>
</div>
);
}
}
export default withRouter(App);
app.css
body {
margin: 0;
padding: 0;
}
.app ul {
display: flex;
margin: 0;
background-color: #ccc;
}
.app ul li {
list-style: none;
padding: 10px;
cursor: pointer;
}
.News {
display: flex;
}
.news {
display: block !important;
background-color: #fff !important;
border: 1px solid #666;
width: 400px;
margin: 10px !important;
}
.newsInfor {
width: 500px;
background-color: #eee;
height: 300px;
}carpeta de componentes
Home.js, MIne.js, SheQu.js, el cambio para cambiar el contenido de su propia, ah, de todos modos
export class Home extends Component {
render() {
return <div>我是首页</div>;
}
}
export default Home;router.js
import React from "react";
import { Route, BrowserRouter, Switch } from "react-router-dom";
// 引入组件
import App from "./App";
import SheQu from "./components/SheQu";
import Home from "./components/Home";
import Mine from "./components/Mine";
import News from "./components/News";
import NoMatch from "./components/NoMatch";
const AppRouter = () => (
<BrowserRouter>
<App>
<Switch>
<Route component={Home} path="/" exact />
<Route component={Mine} path="/mine" />
<Route component={News} path="/news" />
<Route component={SheQu} path="/sq" />
<Route component={NoMatch} />
</Switch>
</App>
</BrowserRouter>
);
export default AppRouter;
News.js
import React, { Component } from "react";
export class News extends Component {
constructor(props) {
super(props);
this.state = {
newsList: [
{
id: 1,
title: "hello ， im in the world1 ?"
},
{
id: 2,
title: "hello ， im in the world2 , you are OK ?"
},
{
id: 3,
title: "hello ， im in the world3， China is Good ? "
},
{
id: 4,
title: "hello ， im in the world4 ，english is bad?"
}
]
};
}
itemHandle(id) {
}
render() {
return (
<div className="News">
<ul className="news">
{this.state.newsList.map(item => (
<li key={item.id} onClick={() => this.itemHandle(item.id)}>
{item.title}
</li>
))}
</ul>
<div className="newsInfor">{this.props.children}</div>
</div>
);
}
}
export default News;
Iniciar el servicio, haga clic en las noticias, de inicio, y así sucesivamente para activarlo
Haga clic en la lista de noticias, Noticias Detalles
add newsInfor.js
import React, { Component } from "react";
export class newsInfor extends Component {
constructor(props) {
super(props);
this.state = {
newsInforList: [
{
id: 1,
infor: "我是第一个hello world"
},
{
id: 2,
infor: "我是第二个hello world"
},
{
id: 3,
infor: "我是第三个hello world"
},
{
id: 4,
infor: "我是第四个hello world"
}
]
};
}
filterNews() {
let id = this.props.match.params.id;
const { newsInforList } = this.state;
return newsInforList.filter(item => {
return item.id === Number(id);
});
}
render() {
return (
<div>
{this.filterNews().map(item => (
<p key={item.id}>{item.infor}</p>
))}
</div>
);
}
}
export default newsInfor;
router.js Modificar
import React from "react";
import { Route, BrowserRouter, Switch } from "react-router-dom";
// 引入组件
import App from "./App";
import SheQu from "./components/SheQu";
import Home from "./components/Home";
import Mine from "./components/Mine";
import News from "./components/News";
import NoMatch from "./components/NoMatch";
import newsInfor from "./components/newsInfor";
const AppRouter = () => (
<BrowserRouter>
<App>
<Switch>
<Route component={Home} path="/" exact />
<Route component={Mine} path="/mine" />
<Route component={News} path="/news" />
<Route component={newsInfor} path="/newsInfor/:id" />
<Route component={SheQu} path="/sq" />
<Route component={NoMatch} />
</Switch>
</App>
</BrowserRouter>
);
export default AppRouter;
News.js la función de devolución de llamada de finalización evento
import React, { Component } from "react";
export class News extends Component {
constructor(props) {
super(props);
this.state = {
newsList: [
{
id: 1,
title: "hello ， im in the world1 ?"
},
{
id: 2,
title: "hello ， im in the world2 , you are OK ?"
},
{
id: 3,
title: "hello ， im in the world3， China is Good ? "
},
{
id: 4,
title: "hello ， im in the world4 ，english is bad?"
}
]
};
}
itemHandle(id) {
this.props.history.push(`/newsInfor/` + id);
}
render() {
return (
<div className="News">
<ul className="news">
{this.state.newsList.map(item => (
<li key={item.id} onClick={() => this.itemHandle(item.id)}>
{item.title}
</li>
))}
</ul>
<div className="newsInfor">{this.props.children}</div>
</div>
);
}
}
export default News;
Pulse el salto, se puede ver los datos para obtener los detalles de noticias
enrutamiento anidada
router.js Modificar
import React from "react";
import { Route, BrowserRouter, Switch } from "react-router-dom";
// 引入组件
import App from "./App";
import SheQu from "./components/SheQu";
import Home from "./components/Home";
import Mine from "./components/Mine";
import News from "./components/News";
import NoMatch from "./components/NoMatch";
import newsInfor from "./components/newsInfor";
const AppRouter = () => (
<BrowserRouter>
<App>
<Switch>
<Route component={Home} path="/" exact />
<Route component={Mine} path="/mine" />
<Route
render={props => (
<News {...props}>
<Route path="/news/newsInfor/:id" component={newsInfor} />
</News>
)}
path="/news"
/>
<Route component={SheQu} path="/sq" />
<Route component={NoMatch} />
</Switch>
</App>
</BrowserRouter>
);
export default AppRouter;
Modificar News.js
import React, { Component } from "react";
export class News extends Component {
constructor(props) {
super(props);
this.state = {
newsList: [
{
id: 1,
title: "hello ， im in the world1 ?"
},
{
id: 2,
title: "hello ， im in the world2 , you are OK ?"
},
{
id: 3,
title: "hello ， im in the world3， China is Good ? "
},
{
id: 4,
title: "hello ， im in the world4 ，english is bad?"
}
]
};
}
itemHandle(id) {
this.props.history.push(`/news/newsInfor/` + id);
}
componentDidMount() {
this.props.history.push(`/news/newsInfor/` + this.state.newsList[0].id);
}
render() {
return (
<div className="News">
<ul className="news">
{this.state.newsList.map(item => (
<li key={item.id} onClick={() => this.itemHandle(item.id)}>
{item.title}
</li>
))}
</ul>
<div className="newsInfor">{this.props.children}</div>
</div>
);
}
}
export default News;
Combat 2, el procesamiento está conectado, para determinar la visualización de la ruta
login.js
import React, { Component } from "react";
export class Login extends Component {
render() {
return (
<div className="login">
<input type="text" />
<br />
<input type="password" />
<br />
<button onClick={this.login}>登录</button>
</div>
);
}
login = () => {
// 存储登录标志
localStorage.setItem("isLogin", true);
this.props.history.push("/app");
};
}
export default Login;
router.js
Por supuesto, también se puede re-enrutado aquí por la operación de Miki, para determinar si, y así también, llegado directamente, si no, redirección a la página de inicio de sesión
import React from "react";
import { Route, BrowserRouter, Switch, Redirect } from "react-router-dom";
// 引入组件
import App from "./App";
import SheQu from "./components/SheQu";
import Home from "./components/Home";
import Mine from "./components/Mine";
import News from "./components/News";
import NoMatch from "./components/NoMatch";
import newsInfor from "./components/newsInfor";
import Login from "./components/Login";
const AppRouter = () => (
<BrowserRouter>
<Switch>
<Route component={Login} path="/" exact />
<Route
path="/app"
render={props => (
<App {...props}>
<Switch>
<Route component={Home} path="/app/home" />
<Route component={Mine} path="/app/mine" />
<Route
render={props => (
<News {...props}>
<Route
path="/app/news/newsInfor/:id"
component={newsInfor}
/>
</News>
)}
path="/app/news"
/>
<Route component={SheQu} path="/app/sq" />
<Route component={NoMatch} />
</Switch>
</App>
)}
/>
</Switch>
</BrowserRouter>
);
export default AppRouter;
News.js
import React, { Component } from "react";
export class News extends Component {
constructor(props) {
super(props);
this.state = {
newsList: [
{
id: 1,
title: "hello ， im in the world1 ?"
},
{
id: 2,
title: "hello ， im in the world2 , you are OK ?"
},
{
id: 3,
title: "hello ， im in the world3， China is Good ? "
},
{
id: 4,
title: "hello ， im in the world4 ，english is bad?"
}
]
};
}
itemHandle(id) {
this.props.history.push(`/app/news/newsInfor/` + id);
}
render() {
return (
<div className="News">
<ul className="news">
{this.state.newsList.map(item => (
<li key={item.id} onClick={() => this.itemHandle(item.id)}>
{item.title}
</li>
))}
</ul>
<div className="newsInfor">{this.props.children}</div>
</div>
);
}
}
export default News;
app.js
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import "./css/app.css";
export class App extends Component {
constructor(props) {
super(props);
this.state = {
navList: [
{
id: 1,
name: "首页",
path: "/app/home"
},
{
id: 2,
name: "新闻",
path: "/app/news"
},
{
id: 3,
name: "社区",
path: "/app/sq"
},
{
id: 4,
name: "我的",
path: "/app/mine"
}
]
};
}
componentDidMount() {
// 获取是否登录的标志
const { history } = this.props;
let islogin = localStorage.getItem("isLogin");
if (islogin) {
history.push("/app/home");
} else {
history.push("/");
}
}
render() {
const { children } = this.props;
const { navList } = this.state;
return (
<div className="app">
<ul>
{navList.map(item => (
<li
key={item.id}
onClick={() => this.props.history.push(item.path)}
>
{item.name}
</li>
))}
</ul>
<div>{children}</div>
</div>
);
}
}
export default withRouter(App);
app.css
body {
margin: 0;
padding: 0;
}
.app ul {
display: flex;
margin: 0;
background-color: #ccc;
}
.app ul li {
list-style: none;
padding: 10px;
cursor: pointer;
}
.News {
display: flex;
}
.news {
display: block !important;
background-color: #fff !important;
border: 1px solid #666;
width: 400px;
margin: 10px !important;
}
.newsInfor {
width: 500px;
background-color: #eee;
height: 300px;
}
.login {
margin: 300px;
}Haga clic en Actualizar para saltar a la derecha
Resumen: Al reaccionar con la ruta para el desarrollo, se puede dibujar primero un boceto que tenía alrededor de un diagrama de flujo, y luego diseñar la ruta, se entiende bien, borrar algunas rutas diseñadas para todo el mundo no es la misma, ni la redacción específica como
