Как создать конечные точки сайта на основе результатов поиска?

Question

Я создаю ReactJS веб-сайт как часть проекта загрузочного веб-разработчика.

Я сделал функцию поиска, используя flask маршруты между reactjs конечными точками (../Language.js) и моя база данных Sqlite3.

http://localhost: 3000 / kanjisearch

Как преобразовать результат поиска в сама конечная точка, хотя? Например, если пользователь ищет «немецкие глаголы», браузер отображает что-то вроде:

http://localhost: 3000 / kanjisearch? = Немецкий + глаголы

Я хочу, чтобы, когда пользователи нажимали стрелки вперед или назад в браузере, пользователь переходил к предыдущему поиску, а НЕ к предыдущей странице, на которой он был.

Можно ли это сделать такое реакция / javascript? Что-то другое? Спасибо.

Answer 1

да, вы можете, вы можете использовать библиотеку react-router-dom, просто сделайте пряжу, добавьте реагирующий маршрутизатор-дом и создайте маршрут. js файл и выполните следующие действия:

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

import someScreen from "../somewhere" // this would be your Screen that you wanna show

const Routes = () => {
    return (
      <Router>
            <Switch>
              <Route path="/container/language/:language" component={someScreen} />
            </Switch>
      </Router>
    );
  };

export default Routes;

после этого вы должны исправить ваше приложение. js файл как следующий

import React from 'react';
import './App.css';
import Routes from './router '; //the location of your router

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Routes/>
      </header>
    </div>
  );
}

export default App;

go для вашего компонента и выполните export default withRouter(someScreen)

На вашем экране Поскольку у вас теперь есть подключенный класс (к маршрутизации), вы можете получить доступ match внутри ваших реквизитов, этот реквизит создается по реакции-маршрутизатору и содержит информацию о том, что совпало на этом маршруте: например, match.params.language будет содержать: язык из маршрута, то есть если у вас есть / german + глаголы

и теперь вы можете использовать URL-адрес как http://localhost: 3000 / container / language / german + verbs , а затем German + verbs

ваши параметры будут переданы вашему компоненту как как

match.params = {
    language: 'language+verbs'
}

используйте это в вашем compDidMount методе

Answer 2

Ну ... какой язык ты хочешь использовать? :-) Вы можете сделать это в любом из тех, что вы упомянули.

Поскольку вы упомянули сначала ReactJS, вы можете сделать это в javascript, используя объект window.location . Просто установите и прочитайте га sh. Кстати, ха sh может быть чем угодно и игнорируется браузером, но ваш JS может посмотреть на него. Ваш URL будет выглядеть примерно так:

http://localhost:3000/container/language/Language#search=german+verbs.